@muonic/muon 0.0.2-experimental-150-4a59267.0 → 0.0.2-experimental-152-a931dc2.0

package/components/card/src/card-component.js

@@ -5,6 +5,8 @@ import { Image } from '@muon/components/image';
 import styles from './card-styles.css';
 
 /**
+ * A card is a container for content.
+ *
  * @element card
  */
 export class Card extends ScopedElementsMixin(ImageHolderMixin(CardMixin(MuonElement))) {

package/components/image/src/image-component.js

@@ -9,8 +9,8 @@ import {
 
 import styles from './image-styles.css';
 
-/**.
- * Loading images with default lazy loading
+/**
+ * Loading images with default lazy loading.
  *
  * @element image
  */

package/components/inputter/src/inputter-component.js

@@ -205,8 +205,8 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
   }
 }
 
-/**.
- * InputterDetail component to handle helper text
+/**
+ * InputterDetail component to handle helper text.
  *
  * @element inputter-detail
  * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-experimental-150-4a59267.0",
+  "version": "0.0.2-experimental-152-a931dc2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -33,7 +33,6 @@
     "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": "8.0.3",
     "glob-to-regexp": "0.4.1",

package/rollup.config.mjs

@@ -3,7 +3,8 @@ import { rollupPlugins } from '@muonic/muon/scripts/rollup-plugins.mjs';
 import virtual from '@rollup/plugin-virtual';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import { createBasicConfig } from '@open-wc/building-rollup';
-import { componentDefiner } from '@muonic/muon/scripts/utils/index.mjs';
+import { componentDefiner, getDestination } from '@muonic/muon/scripts/utils/index.mjs';
+import path from 'path';
 
 const config = createBasicConfig();
 const input = 'index.js';
@@ -22,7 +23,7 @@ export default merge(config, {
   output: {
     ...config.output,
     dir: undefined,
-    file: 'dist/index.js',
+    file: path.join(getDestination(), 'index.js'),
     sourcemap: false,
     inlineDynamicImports: true
   }

package/scripts/rollup-plugins.mjs

@@ -7,7 +7,7 @@ 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 { getConfig, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
+import { cleanup, getConfig, getDestination, createTokens, sourceFilesAnalyzer, getAliasPaths } from './utils/index.mjs';
 
 import path from 'path';
 import fs from 'fs';
@@ -22,13 +22,11 @@ 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();
-
-      fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
+      const destination = getDestination();
+      cleanup(destination, true).then(async () => {
+        const cejson = await sourceFilesAnalyzer();
+        fs.writeFileSync(path.join(destination, 'custom-elements.json'), cejson);
+      });
     }
   };
 };

package/scripts/style-dictionary.mjs

@@ -21,6 +21,16 @@ export default {
         }
       ]
     },
+    ref: {
+      buildPath: path.join(buildPath, 'json/'),
+      transforms: ['color/css', 'size/rem'],
+      files: [
+        {
+          destination: 'muon-tokens-reference.json',
+          format: 'json/reference'
+        }
+      ]
+    },
     es6: {
       buildPath: path.join(buildPath, 'es6/'),
       transforms: ['name/cti/constant', 'color/css', 'size/rem'],

package/scripts/utils/index.mjs

@@ -1,11 +1,9 @@
 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';
 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';
@@ -14,6 +12,7 @@ import path from 'path';
 import styleConfig from '../style-dictionary.mjs';
 import colorTransform from '../../tokens/utils/transforms/color.js';
 import stringTransform from '../../tokens/utils/transforms/string.js';
+import jsonReference from '../../tokens/utils/formats/reference.js';
 
 import { fileURLToPath } from 'url';
 
@@ -22,14 +21,27 @@ const __dirname = path.dirname(__filename);
 
 let config = {};
 
-const cleanup = (destination) => {
+const cleanup = (destination, cleanOnRollup = false) => {
   return new Promise((resolve) => {
-    fs.rmSync(destination, { force: true, recursive: true });
-    fs.rmSync(path.join(__filename, '..', '..', '..', 'build'), { force: true, recursive: true });
+    const cemFilePath = path.join(destination, 'custom-elements.json');
+    const buildPath = path.join(__filename, '..', '..', '..', 'build');
 
-    fs.mkdirSync(destination);
-    fs.mkdirSync(path.join(__filename, '..', '..', '..', 'build'));
+    if (fs.existsSync(destination)) {
+      if (cleanOnRollup) {
+        // eslint-disable-next-line no-unused-expressions
+        fs.existsSync(cemFilePath) && fs.rmSync(cemFilePath);
+      } else {
+        fs.rmSync(destination, { force: true, recursive: true });
+        fs.rmSync(buildPath, { force: true, recursive: true });
+      }
+    }
 
+    if (!fs.existsSync(destination)) {
+      fs.mkdirSync(destination);
+    }
+    if (!cleanOnRollup) {
+      fs.mkdirSync(buildPath);
+    }
     return resolve();
   });
 };
@@ -223,6 +235,8 @@ const styleDictionary = async () => {
 
   const styleDict = StyleDictionary.extend(styleConfig);
 
+  styleDict.registerFormat(jsonReference);
+
   styleDict.registerFormat({
     name: 'css/fonts',
     formatter: cssFontTemplate
@@ -266,9 +280,13 @@ const componentDefiner = async () => {
   return componentDefinition;
 };
 
-const runner = async (file, overrideDestination) => {
+const getDestination = () => {
   const config = getConfig();
-  const destination = overrideDestination || config?.destination || 'dist';
+  return config?.destination || 'dist';
+};
+
+const runner = async (file, overrideDestination) => {
+  const destination = overrideDestination || getDestination();
 
   cleanup(destination).then(async () => {
     import(file);
@@ -276,7 +294,9 @@ const runner = async (file, overrideDestination) => {
 };
 
 export {
+  cleanup,
   getConfig,
+  getDestination,
   filterPathToCustomElements,
   createTokens,
   componentDefiner,

package/storybook/find-stories.js

@@ -3,7 +3,7 @@ const fs = require('fs');
 const pathIsInside = require('path-is-inside');
 
 const findStories = async (dir = process.cwd()) => {
-  const { getConfig, filterPathToCustomElements } = await import('../scripts/utils/index.mjs');
+  const { getConfig, getDestination, filterPathToCustomElements } = await import('../scripts/utils/index.mjs');
 
   const config = getConfig();
   const componentsList = config?.components?.included;
@@ -21,7 +21,7 @@ const findStories = async (dir = process.cwd()) => {
   ) {
     return [path.relative(dir, patterns)];
   } else {
-    const destination = config?.destination || 'dist';
+    const destination = getDestination();
     const symlink = path.join(destination, 'stories');
 
     if (!fs.existsSync(symlink)) {

package/tests/mixins/validation.test.js

@@ -191,7 +191,7 @@ describe('form-element-validation', () => {
     await formElement.updateComplete;
     let validationMessage = shadowRoot.querySelector('.validation');
     expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
-    expect(validationMessage.textContent.trim().toLowerCase()).contains('fill out this field.', 'validation message has correct value');
+    expect(validationMessage.textContent.trim().toLowerCase()).contains('this field is required', 'validation message has correct value');
 
     await fillIn(inputElement, 'test validation');
     expect(formElement.value).to.equal('test validation', '`value` property has value `test validation`');

package/tokens/utils/formats/reference.js

@@ -0,0 +1,17 @@
+module.exports = {
+  name: 'json/reference',
+  formatter: function ({ dictionary }) {
+    const tokens = dictionary.allTokens.map((token) => {
+      token.usesReference = dictionary.usesReference(token.original.value);
+      if (token.usesReference) {
+        token.references = dictionary.getReferences(token.original.value);
+      }
+
+      token.nestedName = token.path.join('.').toLowerCase();
+
+      return token;
+    });
+
+    return JSON.stringify(tokens, null, 2);
+  }
+};