feat: remove elf global and replace with eventListener

packages/core/src/index.ts

@@ -74,10 +74,19 @@ import { CustomStyleRegistry } from './registries/CustomStyleRegistry.js';
 import { NativeStyleRegistry } from './registries/NativeStyleRegistry.js';
 import { global } from './utils/global.js';
 
-global.elf = global.Elf = global.ELF = {
-  customStyles: CustomStyleRegistry,
-  nativeStyles: NativeStyleRegistry,
-  version: 'PUBLISH_VERSION'
-};
+interface EfStylesDefine extends CustomEvent {
+  detail: {
+    name: string,
+    styles: string
+  }
+}
+
+global.addEventListener('ef.customStyles.define', (event) => {
+  const { name, styles } = (event as EfStylesDefine).detail;
+  CustomStyleRegistry.define(name, styles);
+});
 
-Object.freeze(global.elf);
+global.addEventListener('ef.nativeStyles.define', (event) => {
+  const { name, styles } = (event as EfStylesDefine).detail;
+  NativeStyleRegistry.define(name, styles);
+});

packages/elemental-theme/package.json

@@ -15,8 +15,8 @@
     "!.*"
   ],
   "scripts": {
-    "build:light": "theme-compiler light --variant=light",
-    "build:dark": "theme-compiler dark --variant=dark",
+    "build:light": "theme-compiler light --variant=light --styles=event",
+    "build:dark": "theme-compiler dark --variant=dark --styles=event",
     "build": "npm run build:light && npm run build:dark",
     "build:prod": "npm run build",
     "watch": "watch \"npm run build\" src --wait=10",

packages/halo-theme/package.json

@@ -15,8 +15,8 @@
     "!.*"
   ],
   "scripts": {
-    "build:dark": "theme-compiler dark --variant=dark",
-    "build:light": "theme-compiler light --variant=light",
+    "build:dark": "theme-compiler dark --variant=dark --styles=event",
+    "build:light": "theme-compiler light --variant=light --styles=event",
     "build": "npm run build:dark && npm run build:light",
     "build:prod": "npm run build",
     "watch": "watch \"npm run build\" src --wait=10",

packages/solar-theme/package.json

@@ -15,8 +15,8 @@
     "!.*"
   ],
   "scripts": {
-    "build:charcoal": "theme-compiler charcoal --variant=charcoal",
-    "build:pearl": "theme-compiler pearl --variant=pearl",
+    "build:charcoal": "theme-compiler charcoal --variant=charcoal --styles=event",
+    "build:pearl": "theme-compiler pearl --variant=pearl --styles=event",
     "build": "npm run build:charcoal && npm run build:pearl",
     "build:prod": "npm run build",
     "watch": "watch \"npm run build\" src --wait=10",
@@ -32,4 +32,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/theme-compiler/src/helpers.js

@@ -7,8 +7,13 @@ const autoprefixer = require('postcss')().use(require('autoprefixer'));
 const clean = new (require('clean-css'))({ returnPromise: true, level: '2' });
 const path = require('path');
 
-const wrap = (name, style) => `elf.${name.indexOf('-') > 0 ? 'custom'
-: 'native'}Styles.define('${name}', '${style.replace(/'/g, '\\\'')}');\n`;
+const wrap = (name, style, isEvent) => {
+  if(isEvent) {
+    return `dispatchEvent(new CustomEvent('ef.${name.indexOf('-') > 0 ? 'custom'
+    : 'native'}Styles.define', { detail: { name: '${name}', styles: '${style.replace(/'/g, '\\\'')}' }}));\n`;
+  }
+  return `elf.${name.indexOf('-') > 0 ? 'custom' : 'native'}Styles.define('${name}', '${style.replace(/'/g, '\\\'')}');\n`;
+}
 
 const cleanCSS = css => autoprefixer.process(css, { from: false })
 .then(o => clean.minify(o.css)).then(o => o.styles);
@@ -41,13 +46,13 @@ const generateLessOptions = (entrypoint, filename, variables) => ({
   ]
 });
 
-const generateJsInfo = (name, css, dependencies) => {
+const generateJsInfo = (name, css, dependencies, variables) => {
   let importString = 'import \'./imports/native-elements.js\';\n';
   importString += dependencies.filter(name => name.indexOf('-') !== -1)
   .map(dep => `import './${dep}.js';`).join('\n') + '\n';
   return {
     importString,
-    injectorString: wrap(name, css.replace(/([^\\])\\([^\\])/g, '$1\\\\$2'))
+    injectorString: wrap(name, css.replace(/([^\\])\\([^\\])/g, '$1\\\\$2'), variables.styles === 'event')
   };
 };
 
@@ -59,13 +64,13 @@ const getElementNameFromLess = (filename) => {
   return path.basename(filename).replace(/\.less$/, '');
 };
 
-const generateOutput = (filename, output) => {
+const generateOutput = (filename, output, variables) => {
   return cleanCSS(output.css).then(wrapHostSelectors).then(css => {
     let name = path.basename(filename).replace(/\.less$/, '');
     let dependencies = output.imports
     .filter(filename => prefix.test(filename))
     .map(filename => filename.replace(dependencyPattern, ''));
-    let styleInfo = generateJsInfo(name, css, dependencies);
+    let styleInfo = generateJsInfo(name, css, dependencies, variables);
     return {
       name,
       dependencies,

packages/theme-compiler/src/themeParser.js

@@ -50,7 +50,7 @@ const parse = (entrypoint, variables) => {
     let options = helpers.generateLessOptions(entrypoint, entrypoint, variables);
     return fs.readFile(entrypoint, 'utf8').then(lessInput => {
       return less.render(lessInput, options).then(() => {
-        helpers.getElementFiles().forEach(filename => renderElement(filename, lessInput));
+        helpers.getElementFiles().forEach(filename => renderElement(filename, lessInput, variables));
         return Promise.all(tempCollection)
         .then(resolvedCollection => {
           let result = sortCollection(resolvedCollection);
@@ -65,18 +65,19 @@ const parse = (entrypoint, variables) => {
    *
    * @param {String} filename Source of the element styles
    * @param {String} lessInput Less input from the entrypoint
+   * @param {Object} variables Variables to modify in the less input
    * @returns {Promise} Promise
    */
-  const renderElement = (filename, lessInput) => {
+  const renderElement = (filename, lessInput, variables) => {
     // Obtain elementName
     const elemName = helpers.getElementNameFromLess(filename);
 
     // Detect correct elemName and append theme information as css variable in less file for use in telemetry
     lessInput = (elemName === 'html') ? stampThemeInfo(lessInput): lessInput;
 
-    let options = helpers.generateLessOptions(entrypoint, filename, variables);
+    let options = helpers.generateLessOptions(entrypoint, filename);
     let promise = less.render(lessInput, options)
-    .then(output => helpers.generateOutput(filename, output));
+    .then(output => helpers.generateOutput(filename, output, variables));
     tempCollection.push(promise);
     return promise;
   };

scripts/release/theme-extractor.js

@@ -169,7 +169,7 @@ const handler = async () => {
         // Reads theme entrypoint content
         const sourceContent = fs.readFileSync(possibleThemeEntrypoint).toString();
         const componentThemeDefinition = sourceContent.substring(
-          sourceContent.indexOf('elf.customStyles.define')
+          sourceContent.indexOf(`dispatchEvent(new CustomEvent('ef.customStyles.define'`)
         );
 
         // Skip if the file already contain the same component definition