@muonic/muon 0.0.2-experimental-138-4339428.0 → 0.0.2-experimental-139-b12e3fd.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-138-4339428.0",
+  "version": "0.0.2-experimental-139-b12e3fd.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -18,34 +18,36 @@
   "license": "ISC",
   "dependencies": {
     "@open-wc/building-rollup": "2.0.1",
-    "@open-wc/scoped-elements": "2.1.1",
+    "@open-wc/scoped-elements": "2.1.2",
     "@rollup/plugin-alias": "3.1.9",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@rollup/plugin-virtual": "2.0.3",
-    "@web/dev-server": "0.1.16",
-    "@web/dev-server-rollup": "0.3.3",
+    "@rollup/plugin-virtual": "2.1.0",
+    "@web/dev-server": "0.1.32",
+    "@web/dev-server-rollup": "0.3.18",
     "@web/dev-server-storybook": "0.5.1",
-    "@web/storybook-prebuilt": "0.1.32",
+    "@web/storybook-prebuilt": "0.1.34",
     "@webcomponents/scoped-custom-element-registry": "0.0.5",
     "app-root-path": "3.0.0",
-    "autoprefixer": "10.4.0",
-    "chokidar": "3.5.1",
-    "chroma-js": "2.1.1",
-    "command-line-args": "5.2.0",
+    "autoprefixer": "10.4.7",
+    "chokidar": "3.5.3",
+    "chroma-js": "2.4.2",
+    "command-line-args": "5.2.1",
+    "deep-equal": "^2.0.5",
     "deepmerge": "4.2.2",
-    "glob": "7.1.6",
-    "lit": "2.2.2",
+    "glob": "8.0.3",
+    "lit": "2.2.7",
     "lodash": "4.17.21",
     "path-is-inside": "1.0.2",
-    "postcss": "8.2.13",
+    "postcss": "8.4.14",
     "postcss-clean": "1.2.2",
-    "postcss-import": "14.0.1",
-    "postcss-preset-env": "7.0.1",
+    "postcss-import": "14.1.0",
+    "postcss-preset-env": "7.7.2",
     "postcss-simple-vars": "6.0.3",
-    "rollup-plugin-lit-css": "3.2.1",
+    "rollup-plugin-lit-css": "4.0.0",
     "rollup-plugin-styles": "4.0.0",
-    "style-dictionary": "3.0.1",
+    "style-dictionary": "3.7.1",
+    "tmp": "^0.2.1",
     "web-component-analyzer": "1.1.6"
   },
   "devDependencies": {

package/scripts/build/storybook/run.mjs

@@ -55,7 +55,7 @@ const main = async () => {
   }
 
   await createTokens();
-  await createComponentElementsJson('dist');
+  // await createComponentElementsJson('dist');
   await createGlobalCSS('dist');
 
   execSync(`build-storybook --output-dir ${outputDir} --config-dir ${configDir}`);

package/scripts/rollup-plugins.mjs

@@ -8,15 +8,89 @@ import postcssImport from 'postcss-import';
 import postcssVariables from 'postcss-simple-vars';
 import litcssPlugin from 'rollup-plugin-lit-css';
 import * as variables from '../build/tokens/es6/muon-tokens.mjs';
-import { getConfig } from './utils/index.mjs';
+import { findComponents, getConfig, createComponentElementsJson } from './utils/index.mjs';
+
+import { dirSync } from 'tmp';
+import fs from 'fs';
 import path from 'path';
 
+const config = getConfig(`muon.config.json`);
+
+const tmp = dirSync({ unsafeCleanup: true });
+const tmpName = tmp.name;
+
+const writeFileSyncRecursive = (filename, content = '') => {
+  fs.mkdirSync(path.dirname(filename), { recursive: true });
+  fs.writeFileSync(filename, content);
+};
+
+const getTmpFilePath = (tmpName, file) => path.join(tmpName, path.relative(process.cwd(), file));
+
+const runElementJson = async () => {
+  const files = (await findComponents()).map((file) => getTmpFilePath(tmpName, file));
+  await createComponentElementsJson(files);
+};
+
+const shouldSkip = (file) => {
+  return file.indexOf('node_modules') > 0 || file.indexOf('virtual:') > 0;
+};
+
+const createElementJsonFile = async () => {
+  const destination = config?.destination || 'dist';
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination, { recursive: true });
+  }
+  fs.writeFileSync(path.join(destination, 'custom-elements.json'), JSON.stringify({ tags: [] }));
+};
+
+let createElementJsonTimer;
+const analyzerPlugin = () => {
+  return {
+    name: 'analyzer',
+    async moduleParsed(obj) {
+      if (shouldSkip(obj.id)) {
+        return;
+      }
+      writeFileSyncRecursive(getTmpFilePath(tmpName, obj.id), obj.code);
+      if (createElementJsonTimer) {
+        clearTimeout(createElementJsonTimer);
+      }
+      createElementJsonTimer = setTimeout(runElementJson, 500);
+    },
+    async serverStart() {
+      await createElementJsonFile();
+    },
+    serverStop() {
+      tmp.removeCallback();
+    },
+    async buildStart() {
+      await createElementJsonFile();
+    },
+    async buildEnd() {
+      tmp.removeCallback();
+    },
+    async generateBundle(options, bundle) {
+      let code = '';
+      Object.keys(bundle).forEach((file) => {
+        Object.keys(bundle[file].modules).forEach((module) => {
+          code += `
+          ${bundle[file].modules[module].code}
+          `;
+        });
+      });
+
+      writeFileSyncRecursive(getTmpFilePath(tmpName, 'code.js'), code);
+      createComponentElementsJson([getTmpFilePath(tmpName, 'code.js')]);
+    }
+  };
+};
+
 const styles = fromRollup(stylesPlugin);
 const replace = fromRollup(replacePlugin);
 const litcss = fromRollup(litcssPlugin);
 const alias = fromRollup(aliasPlugin);
+const analyzer = fromRollup(analyzerPlugin);
 
-const config = getConfig(`muon.config.json`);
 const additionalAlias = config?.alias?.map(({ find, replacement }) => {
   return {
     find,
@@ -69,12 +143,14 @@ export const serverPlugins = [
   alias(aliasConfig),
   replace(replaceConfig),
   styles(styleConfig),
-  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] })
+  litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  analyzer()
 ];
 
 export const rollupPlugins = [
   aliasPlugin(aliasConfig),
   replacePlugin(replaceConfig),
   stylesPlugin(styleConfig),
-  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] })
+  litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
+  analyzerPlugin()
 ];

package/scripts/serve/run.mjs

@@ -4,7 +4,7 @@ import chokidar from 'chokidar';
 import { startDevServer } from '@web/dev-server';
 import commandLineArgs from 'command-line-args';
 import StorybookConfig from '../../storybook/server.config.mjs';
-import { getConfig, createComponentElementsJson, createTokens } from '../utils/index.mjs';
+import { getConfig, createTokens } from '../utils/index.mjs';
 
 import postcss from 'postcss';
 import { postcssPlugins } from '../rollup-plugins.mjs';
@@ -59,11 +59,6 @@ const main = async () => {
   const destination = config?.destination || 'dist';
 
   await createStyleTokens(destination);
-  await createComponentElementsJson();
-
-  chokidar.watch('components/**/*-component.js', { ignoreInitial: true }).on('all', async () => {
-    await createComponentElementsJson();
-  });
 
   /* Internal dev mode */
   chokidar.watch(globalCSSUrl, { ignoreInitial: true }).on('all', async () => {

package/scripts/utils/index.mjs

@@ -4,6 +4,7 @@ import StyleDictionary from 'style-dictionary';
 import formatHelpers from 'style-dictionary/lib/common/formatHelpers/index.js';
 import _ from 'lodash';
 import appRoot from 'app-root-path';
+import deepEqual from 'deep-equal';
 import glob from 'glob';
 import fs from 'fs';
 import path from 'path';
@@ -94,10 +95,13 @@ const analyze = async () => {
   });
 };
 
-const createComponentElementsJson = async (overrideDest) => {
-  const files = await findComponents();
+const createComponentElementsJson = async (files) => {
+  if (!files) {
+    files = await findComponents();
+  }
   const config = await getConfig();
-  const destination = overrideDest || config.destination || 'dist';
+  const destination = config.destination || 'dist';
+
   const results = await analyzeAndTransformGlobs(files, {
     format: 'json'
   });
@@ -112,7 +116,11 @@ const createComponentElementsJson = async (overrideDest) => {
     process.exit(1);
   }
 
-  fs.writeFileSync(path.join(destination, 'custom-elements.json'), results);
+  const content = JSON.parse(fs.readFileSync(path.join(destination, 'custom-elements.json')));
+
+  if (!deepEqual(content, jsonResults)) {
+    fs.writeFileSync(path.join(destination, 'custom-elements.json'), results);
+  }
   return results;
 };
 
@@ -191,5 +199,6 @@ export {
   styleDictionary,
   createTokens,
   componentDefiner,
+  findComponents,
   runner
 };