add first version

Author: hadl

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,12 @@
+root=true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+/pl-public
+/dependencyGraph.json
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+};

buildScripts/PatternlabPlugin.js

@@ -0,0 +1,145 @@
+const globby = require('globby');
+const minimatch = require('minimatch');
+const { resolve, join } = require('path');
+const fs = require('fs-extra');
+const { info, warn } = require('@vue/cli-shared-utils');
+const patternlabCore = require('@pattern-lab/core');
+
+const VueService = process.VUE_CLI_SERVICE;
+
+const plConfig = require('../patternlab-config.json');
+const contentBaseDir = join(VueService.context, plConfig.paths.public.root);
+
+class PatternlabPlugin {
+  constructor() {
+    this.pluginName = 'PatternlabPlugin';
+    this.startTime = Date.now();
+    this.prevTimestamps = new Map();
+    this.patternlab = patternlabCore(plConfig);
+    this.PlPatternPath = resolve(VueService.context, plConfig.paths.source.patterns);
+
+    // fix html webpack plugin error child compilation failed
+    // due to missing index.html inside the content base dir
+    // because patternlab build not finished before html plugin init :(
+    // create index.html
+    fs.ensureFileSync(join(contentBaseDir, 'index.html'));
+  }
+
+  apply(compilation) {
+    this.initHooks(compilation);
+  }
+
+  initHooks(compilation) {
+    if (compilation.hooks) {
+      compilation.hooks.afterCompile.tap(this.pluginName, this.addPatternLabFiles.bind(this));
+      compilation.hooks.watchRun.tap(this.pluginName, this.watchRun.bind(this));
+    }
+  }
+
+  addPatternLabFiles(compilation) {
+    const patternFiles = this.getPatternlabFiles();
+    patternFiles.forEach(item => {
+      compilation.fileDependencies.add(item);
+    });
+    info('addPatternLabFiles', 'aftercompile');
+
+    if (compilation.contextDependencies && !compilation.contextDependencies.has(this.PlPatternPath)) {
+      compilation.contextDependencies.add(this.PlPatternPath);
+    }
+  }
+
+  getPatternlabFiles() {
+    const allWatchFiles = this.getWatchFileGlobs();
+
+    const files = [];
+    allWatchFiles.forEach(globPath => {
+      const patternFiles = globby
+        .sync(globPath);
+      patternFiles.forEach(item => {
+        files.push(item);
+      });
+    });
+
+    return files;
+  }
+
+  getWatchFileGlobs() {
+    const supportedTemplateExtensions = this.patternlab.getSupportedTemplateExtensions();
+    const templateFilePaths = supportedTemplateExtensions.map(
+      function (extension) {
+        return `${plConfig.paths.source.patterns}**/*${extension}`;
+      }
+    );
+
+    // pattern lab watch file globs
+    const watchFiles = [
+      ...templateFilePaths,
+      `${plConfig.paths.source.patterns}**/*.(json|md|yaml|yml)`,
+      `${plConfig.paths.source.data}**/*.(json|md|yaml|yml)`,
+      `${plConfig.paths.source.meta}**/*`,
+      `${plConfig.paths.source.annotations}**/*`
+    ]
+      .map(el => VueService.context + (el.startsWith('.') ? el.substr(1) : el));
+
+    return watchFiles;
+  }
+
+  matchesWatchFileGlob(paths = []) {
+    const globs = this.getWatchFileGlobs();
+    let matches = [];
+    for (let globIndex = 0; globIndex < globs.length; globIndex++) {
+      matches = minimatch.match(paths, globs[globIndex]);
+      if (!!matches.length) {
+        break;
+      }
+    }
+
+    return !!matches.length;
+  }
+
+  watchRun(compilation, callback) {
+    info('watchRun');
+    const changedFiles = Array.from(compilation.fileTimestamps.keys()).filter(
+      watchfile => {
+        return (
+          (this.prevTimestamps.get(watchfile) || this.startTime)
+          < (compilation.fileTimestamps.get(watchfile) || Infinity)
+        );
+      }
+    );
+
+    const hasChangedPLSourceFiles = !!changedFiles.length && this.matchesWatchFileGlob(changedFiles);
+    const removedFiles = Array.from(compilation.removedFiles);
+    const hasDeletedPLSourceFiles = !!removedFiles.length && this.matchesWatchFileGlob(removedFiles);
+
+    if (hasChangedPLSourceFiles || hasDeletedPLSourceFiles) {
+      this.buildPatternlab();
+    }
+
+    this.prevTimestamps = compilation.fileTimestamps;
+
+    if (callback) { callback(); }
+  }
+
+  buildPatternlab() {
+    const { cleanPublic } = plConfig;
+    const options = { 'cleanPublic': cleanPublic };
+
+    if (!this.patternlab.isBusy()) {
+      try {
+        this.patternlab.build(options)
+          .then(r => {
+            info('Patternlab build complete');
+          })
+          .catch((error) => {
+            warn(`Patternlab build error: ${error}`);
+          });
+      } catch (e) {
+        warn(`Patternlab build error: ${e}`);
+      }
+    }
+  }
+
+}
+
+module.exports = PatternlabPlugin;

buildScripts/patternlabWebpackPlugins.js

@@ -0,0 +1,33 @@
+const PatternLabPlugin = require('./PatternlabPlugin');
+
+const { getIfUtils } = require('webpack-config-utils');
+const { join } = require('path');
+const VueService = process.VUE_CLI_SERVICE;
+
+const plConfig = require('../patternlab-config.json');
+const { ifDevelopment } = getIfUtils(process.env.NODE_ENV);
+const contentBaseDir = join(VueService.context, plConfig.paths.public.root);
+
+const patternLabPlugin = new PatternLabPlugin();
+const patternlabWebpackPlugins = [
+  ifDevelopment(
+    patternLabPlugin,
+  ),
+];
+
+if (ifDevelopment()) { patternLabPlugin.buildPatternlab();}
+
+exports.patternlabWebpackPlugins = patternlabWebpackPlugins;
+
+const patternlabVuePluginConfig = (config) => {
+  config
+    .plugin('html')
+    .tap(args => {
+      args[0].template = join(contentBaseDir, 'index.html');
+      return args;
+    });
+
+  config.devServer.contentBase(contentBaseDir);
+};
+
+exports.patternlabVuePluginConfig = patternlabVuePluginConfig;