@muonic/muon 0.0.2-experimental-139-b12e3fd.0 → 0.0.2-experimental-142-e1fad5a.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-139-b12e3fd.0",
+  "version": "0.0.2-experimental-142-e1fad5a.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,6 @@
   },
   "bin": {
     "muon-serve": "./scripts/serve/index.mjs",
-    "muon-build-styles": "./scripts/build/styles/index.mjs",
     "muon-build-storybook": "./scripts/build/storybook/index.mjs"
   },
   "keywords": [],
@@ -36,6 +35,7 @@
     "deep-equal": "^2.0.5",
     "deepmerge": "4.2.2",
     "glob": "8.0.3",
+    "glob-to-regexp": "0.4.1",
     "lit": "2.2.7",
     "lodash": "4.17.21",
     "path-is-inside": "1.0.2",
@@ -47,7 +47,7 @@
     "rollup-plugin-lit-css": "4.0.0",
     "rollup-plugin-styles": "4.0.0",
     "style-dictionary": "3.7.1",
-    "tmp": "^0.2.1",
+    "typescript": "4.8.2",
     "web-component-analyzer": "1.1.6"
   },
   "devDependencies": {

package/scripts/build/storybook/run.mjs

@@ -6,25 +6,6 @@ import fs from 'fs';
 
 import commandLineArgs from 'command-line-args';
 
-import { createTokens, createComponentElementsJson } from '../../utils/index.mjs';
-
-import postcss from 'postcss';
-import { postcssPlugins } from '../../rollup-plugins.mjs';
-
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-
-const globalCSSUrl = path.join(__filename, '..', '..', '..', '..', 'css', 'global.css');
-
-// @TODO: make reusable
-const createGlobalCSS = async (destination) => {
-  const globalCSSDest = path.join(destination, 'muon.min.css');
-  const globalCSS = await fs.readFileSync(globalCSSUrl);
-  const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
-
-  fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
-};
-
 const args = commandLineArgs([
   {
     name: 'config-dir',
@@ -54,10 +35,6 @@ const main = async () => {
     fs.mkdirSync(outputDir);
   }
 
-  await createTokens();
-  // await createComponentElementsJson('dist');
-  await createGlobalCSS('dist');
-
   execSync(`build-storybook --output-dir ${outputDir} --config-dir ${configDir}`);
 
   console.log('Storybook build completed');

package/scripts/rollup-plugins.mjs

@@ -7,80 +7,41 @@ import postcssPreset from 'postcss-preset-env';
 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 { findComponents, getConfig, createComponentElementsJson } from './utils/index.mjs';
+import { getConfig, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
 
-import { dirSync } from 'tmp';
-import fs from 'fs';
 import path from 'path';
+import fs from 'fs';
 
-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);
-};
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-const getTmpFilePath = (tmpName, file) => path.join(tmpName, path.relative(process.cwd(), file));
+const config = getConfig(`muon.config.json`);
 
-const runElementJson = async () => {
-  const files = (await findComponents()).map((file) => getTmpFilePath(tmpName, file));
-  await createComponentElementsJson(files);
-};
+const muonPlugin = () => {
+  return {
+    name: 'muon',
+    async buildStart() {
+      const destination = config?.destination || 'dist';
+      if (!fs.existsSync(destination)) {
+        fs.mkdirSync(destination, { recursive: true });
+      }
+      const cejson = await sourceFilesAnalyzer();
 
-const shouldSkip = (file) => {
-  return file.indexOf('node_modules') > 0 || file.indexOf('virtual:') > 0;
+      fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
+    }
+  };
 };
 
-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: [] }));
-};
+const tokenPath = path.join(__dirname, '..', 'build', 'tokens', 'es6', 'muon-tokens.mjs');
+let designTokens = {};
 
-let createElementJsonTimer;
-const analyzerPlugin = () => {
+const buildTokensPlugin = () => {
   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();
-    },
+    name: 'generate-tokens-plugin',
     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')]);
+      await createTokens();
+      designTokens = await import(tokenPath);
     }
   };
 };
@@ -89,29 +50,18 @@ const styles = fromRollup(stylesPlugin);
 const replace = fromRollup(replacePlugin);
 const litcss = fromRollup(litcssPlugin);
 const alias = fromRollup(aliasPlugin);
-const analyzer = fromRollup(analyzerPlugin);
-
-const additionalAlias = config?.alias?.map(({ find, replacement }) => {
-  return {
-    find,
-    replacement: path.join(process.cwd(), replacement)
-  };
-}).filter((alias) => alias) ?? [];
+const muon = fromRollup(muonPlugin);
+const buildTokens = fromRollup(buildTokensPlugin);
 
 const aliasConfig = {
-  entries: [
-    ...additionalAlias,
-    { find: /^@muon\/components\/(.*)/, replacement: '@muonic/muon/components/$1' },
-    { find: /^@muon\/mixins\/(.*)/, replacement: '@muonic/muon/mixins/$1' },
-    { find: /^@muon\/directives\/(.*)/, replacement: '@muonic/muon/directives/$1' },
-    { find: /^@muon\/utils\/(.*)/, replacement: '@muonic/muon/utils/$1' },
-    { find: '@muon/tokens', replacement: '@muonic/muon/build/tokens/es6/muon-tokens' }
-  ]
+  entries: getAliasPaths('regex')
 };
 
-export const postcssPlugins = [
+const postcssPlugins = [
   postcssVariables({
-    variables,
+    variables() {
+      return designTokens;
+    },
     unknown(node) {
       node.remove(); // removing unknown or unset tokens
     }
@@ -126,6 +76,16 @@ export const postcssPlugins = [
   autoprefixer({ grid: true })
 ];
 
+// @TODO: bring back when global css is used
+// const createGlobalCSS = async (destination) => {
+//   const globalCSSUrl = path.join(__filename, '..', '..', '..', 'css', 'global.css');
+//   const globalCSSDest = path.join(destination, 'muon.min.css');
+//   const globalCSS = fs.readFileSync(globalCSSUrl);
+//   const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
+
+//   fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
+// };
+
 const styleConfig = {
   mode: 'emit',
   minimize: true,
@@ -140,17 +100,19 @@ const replaceConfig = {
 };
 
 export const serverPlugins = [
+  buildTokens(),
   alias(aliasConfig),
   replace(replaceConfig),
   styles(styleConfig),
   litcss({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
-  analyzer()
+  muon()
 ];
 
 export const rollupPlugins = [
+  buildTokensPlugin(),
   aliasPlugin(aliasConfig),
   replacePlugin(replaceConfig),
   stylesPlugin(styleConfig),
   litcssPlugin({ exclude: ['**/css/*.css', '**/dist/*.css', 'muon.min.css'] }),
-  analyzerPlugin()
+  muonPlugin()
 ];

package/scripts/serve/run.mjs

@@ -1,72 +1,15 @@
-import path from 'path';
-import fs from 'fs';
-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, createTokens } from '../utils/index.mjs';
-
-import postcss from 'postcss';
-import { postcssPlugins } from '../rollup-plugins.mjs';
-
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-
-const globalCSSUrl = path.join(__filename, '..', '..', '..', 'css', 'global.css');
 
 const myServerDefinitions = [
   { name: 'no-open', type: Boolean },
   { name: 'no-watch', type: Boolean },
 ];
 
-const copyDir = async (src, dest) => {
-  fs.mkdirSync(dest, { recursive: true });
-  const entries = fs.readdirSync(src, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-
-    entry.isDirectory() ?
-      await copyDir(srcPath, destPath) :
-      fs.copyFileSync(srcPath, destPath);
-  }
-};
-
-const createGlobalCSS = async (destination) => {
-  const globalCSSDest = path.join(destination, 'muon.min.css');
-  const globalCSS = await fs.readFileSync(globalCSSUrl);
-  const processedCSS = await postcss(postcssPlugins).process(globalCSS, { from: globalCSSUrl, to: globalCSSDest });
-
-  fs.writeFileSync(globalCSSDest, processedCSS.css, 'utf8');
-};
-
 const myConfig = commandLineArgs(myServerDefinitions, { partial: true });
 
-const createStyleTokens = async (destination) => {
-  await createGlobalCSS(destination);
-
-  copyDir(path.join(__filename, '..', '..', '..', 'build'), destination);
-};
-
-const updateStyleTokens = async (destination) => {
-  await createTokens();
-  await createStyleTokens(destination);
-};
-
 const main = async () => {
-  const config = await getConfig();
-  const destination = config?.destination || 'dist';
-
-  await createStyleTokens(destination);
-
-  /* Internal dev mode */
-  chokidar.watch(globalCSSUrl, { ignoreInitial: true }).on('all', async () => {
-    await createGlobalCSS(destination);
-  });
-  chokidar.watch(path.join(__filename, '..', '..', 'tokens'), { ignoreInitial: true }).on('all', () => updateStyleTokens(destination));
-  chokidar.watch('tokens', { ignoreInitial: true }).on('all', () => updateStyleTokens(destination));
-
   await startDevServer({
     argv: myConfig._unknown,
     config: {

package/scripts/utils/index.mjs

@@ -1,4 +1,5 @@
-import { analyzeText } from 'web-component-analyzer';
+import ts from 'typescript';
+import { analyzeText, analyzeSourceFile, transformAnalyzerResult } from 'web-component-analyzer';
 import { analyzeAndTransformGlobs } from 'web-component-analyzer/lib/cjs/cli.js';
 import StyleDictionary from 'style-dictionary';
 import formatHelpers from 'style-dictionary/lib/common/formatHelpers/index.js';
@@ -6,6 +7,7 @@ import _ from 'lodash';
 import appRoot from 'app-root-path';
 import deepEqual from 'deep-equal';
 import glob from 'glob';
+import globToRegExp from 'glob-to-regexp';
 import fs from 'fs';
 import path from 'path';
 
@@ -14,6 +16,7 @@ import colorTransform from '../../tokens/utils/transforms/color.js';
 import stringTransform from '../../tokens/utils/transforms/string.js';
 
 import { fileURLToPath } from 'url';
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -103,7 +106,9 @@ const createComponentElementsJson = async (files) => {
   const destination = config.destination || 'dist';
 
   const results = await analyzeAndTransformGlobs(files, {
-    format: 'json'
+    format: 'json',
+    discoverNodeModules: true,
+    analyzeDependencies: true
   });
 
   const jsonResults = JSON.parse(results);
@@ -124,6 +129,110 @@ const createComponentElementsJson = async (files) => {
   return results;
 };
 
+const getAliasPaths = (type) => {
+  const defaultPaths = {
+    '@muon/components/*': '@muonic/muon/components/*',
+    '@muon/mixins/*': '@muonic/muon/mixins/*',
+    '@muon/directives/*': '@muonic/muon/directives/*',
+    '@muon/utils/*': '@muonic/muon/utils/*',
+    '@muon/tokens': '@muonic/muon/build/tokens/es6/muon-tokens'
+  };
+
+  const config = getConfig(`muon.config.json`);
+  const alias = config?.alias || {};
+
+  if (type === 'glob') {
+    const paths = {
+      ...alias,
+      ...defaultPaths
+    };
+    const obj = {};
+
+    Object.keys(paths).forEach((key) => {
+      const value = paths[key];
+      if (
+        value.startsWith('./') ||
+        value.startsWith('../') ||
+        value.startsWith('/')
+      ) {
+        obj[key] = [value];
+      } else {
+        // @TODO: This needs a better way to find the node_modules folder
+        obj[key] = [`node_modules/${value}`];
+      }
+    });
+
+    return obj;
+  }
+
+  if (type === 'regex') {
+    const objGlobToRegexArr = (paths) => {
+      if (!paths) {
+        return [];
+      }
+
+      return Object.keys(paths).map((key) => {
+        //TODO: What happens if someone uses ** in their glob?
+        const regKey = globToRegExp(key.replaceAll('*', '{*}'), { extended: true });
+        //@TODO: See how to replace * better
+        return { find: regKey, replacement: paths[key].replaceAll('*', '$1') };
+      });
+    };
+
+    const additionalAlias = objGlobToRegexArr(config?.alias)?.map(({ find, replacement }) => {
+      return {
+        find,
+        replacement: path.join(process.cwd(), replacement)
+      };
+    }).filter((alias) => alias) ?? [];
+
+    const defaultAlias = objGlobToRegexArr(defaultPaths);
+
+    return [...additionalAlias, ...defaultAlias];
+  }
+
+  return undefined;
+};
+
+const sourceFilesAnalyzer = async () => {
+  const files = await findComponents();
+  const paths = await getAliasPaths('glob');
+  const options = {
+    noEmitOnError: false,
+    allowJs: true,
+    maxNodeModuleJsDepth: 3,
+    experimentalDecorators: true,
+    target: ts.ScriptTarget.Latest,
+    downlevelIteration: true,
+    module: ts.ModuleKind.ESNext,
+    strictNullChecks: true,
+    moduleResolution: ts.ModuleResolutionKind.NodeJs,
+    esModuleInterop: true,
+    noEmit: true,
+    allowSyntheticDefaultImports: true,
+    allowUnreachableCode: true,
+    allowUnusedLabels: true,
+    skipLibCheck: true,
+    baseUrl: '.',
+    paths
+  };
+  const filePaths = Array.isArray(files) ? files : [files];
+  const program = ts.createProgram(filePaths, options);
+  const sourceFiles = program.getSourceFiles().filter((sf) => files.includes(sf.fileName));
+
+  const results = sourceFiles.map((sourceFile) => analyzeSourceFile(sourceFile, {
+    ts,
+    program,
+    verbose: true,
+    config: {
+      format: 'json',
+      discoverNodeModules: true
+    }
+  }));
+
+  return transformAnalyzerResult('json', results, program);
+};
+
 const styleDictionary = async () => {
   const config = await getConfig();
 
@@ -185,8 +294,6 @@ const runner = async (file, overrideDestination) => {
   const destination = overrideDestination || config?.destination || 'dist';
 
   cleanup(destination).then(async () => {
-    await createTokens();
-
     import(file);
   });
 };
@@ -200,5 +307,7 @@ export {
   createTokens,
   componentDefiner,
   findComponents,
-  runner
+  runner,
+  sourceFilesAnalyzer,
+  getAliasPaths
 };

package/web-test-runner.config.mjs

@@ -1,7 +1,6 @@
 import { playwrightLauncher } from '@web/test-runner-playwright';
 import { serverPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
 import { checkRunSnapshots } from './tests/runner/commands.mjs';
-// process.env.MUON_PREFIX = 'testing';
 
 export default {
   testRunnerHtml: (testFramework) =>

package/scripts/build/styles/index.mjs

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-import { createTokens } from '../../utils/index.mjs';
-
-createTokens();