chore(site): initial isolated playground sources

exadel-inc · Jan 30, 2024 · 12f6ae9 · 12f6ae9
1 parent 3c43e1b
commit 12f6ae9
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 14 deletions.
diff --git a/site/package.json b/site/package.json
@@ -19,7 +19,9 @@
     "minify:css": "cleancss -o \"dist/bundles/localdev.css\" \"dist/bundles/localdev.css\"",
     "build": "npm run clean && concurrently \"npm run build:ts\" \"npm run build:less && npm run minify:css\" && npm run build:eleventy",
     "build:ts": "webpack --mode=production",
-    "build:less": "lessc \"src/localdev.less\" \"dist/bundles/localdev.css\" --source-map=dist/bundles/localdev.css.map",
+    "build:less": "concurrently --kill-others \"npm run build:less:site\" \"npm run build:less:lib\"",
+    "build:less:site": "lessc \"src/localdev.less\" \"dist/bundles/localdev.css\" --source-map=dist/bundles/localdev.css.map",
+    "build:less:lib": "lessc \"src/playground/export/lib.less\" \"dist/bundles/lib.css\" --source-map=dist/bundles/lib.css.map",
     "build:eleventy": "eleventy -- --env=production",
     "build:analyzer": "webpack --mode=production --profile --json ../.report/stats.json && webpack-bundle-analyzer ../.report/stats.json dist/bundles -s gzip -m static -r ../.report/stats.html"
   },

diff --git a/site/src/localdev.less b/site/src/localdev.less
@@ -41,4 +41,4 @@
 @import './back-link/back-link';
 
 // TODO: load separately async
-@import './ui-playground/ui-playground.less';
+@import './playground/ui-playground.less';
diff --git a/site/src/localdev.ts b/site/src/localdev.ts
@@ -118,5 +118,5 @@ import (/* webpackChunkName: 'common/esl-share' */'./esl-share/esl-share');
 
 if (document.querySelector('uip-root')) {
   // Init UI Playground
-  import (/* webpackChunkName: "common/playground" */'./ui-playground/ui-playground');
+  import (/* webpackChunkName: "common/playground" */'./playground/ui-playground');
 }
diff --git a/site/src/playground/export/lib.less b/site/src/playground/export/lib.less
@@ -0,0 +1,23 @@
+@import '../../common/reboot.less';
+@import '../../common/typography.less';
+@import '../../common/colors.less';
+
+@import '@exadel/esl/modules/all.less';
+
+@import '../../common/accent-lines.less';
+@import '../../common/accordion.less';
+@import '../../common/alert.less';
+@import '../../common/badge.less';
+@import '../../common/buttons.less';
+@import '../../common/code.less';
+@import '../../common/links.less';
+@import '../../common/close.less';
+@import '../../common/containers.less';
+@import '../../common/simple-grid.less';
+@import '../../common/forms.less';
+@import '../../common/flex.less';
+@import '../../common/helpers.less';
+@import '../../common/marquee.less';
+@import '../../common/scrollbar.less';
+@import '../../common/tabs.less';
+@import '../../common/dropdown-menu.less';
diff --git a/site/src/playground/export/lib.ts b/site/src/playground/export/lib.ts
@@ -0,0 +1 @@
+export * from '@exadel/esl';
diff --git a/site/src/ui-playground/ui-playground.less → site/src/playground/ui-playground.less b/site/src/ui-playground/ui-playground.less → site/src/playground/ui-playground.less
@@ -45,4 +45,8 @@ html {
   .uip-inactive-setting {
     display: none;
   }
+
+  .uip-preview-h-scroll[inactive] {
+    display: none;
+  }
 }
diff --git a/site/src/playground/ui-playground.ts b/site/src/playground/ui-playground.ts
@@ -0,0 +1,23 @@
+import {init, UIPJSRenderingPreprocessors, UIPRenderingTemplatesService} from '@exadel/ui-playground';
+
+// Add ESL lib alias
+UIPJSRenderingPreprocessors.addRegexReplacer(
+  'esl-alias',
+  /["']@exadel\/esl["']/g,
+  '"/bundles/lib.js"'
+);
+
+// Add template
+UIPRenderingTemplatesService.add('default', `
+  <html>
+    <head>
+      <title>{title}</title>
+      <base href="${location.origin}"/>
+      <link rel="stylesheet" href="/bundles/lib.css">
+      <script type="module">{script}</script>
+    </head>
+    <body>{content}</body>
+  </html>
+`);
+
+init();
diff --git a/site/src/ui-playground/ui-playground.ts b/site/src/ui-playground/ui-playground.ts
diff --git a/site/webpack.config.js b/site/webpack.config.js
@@ -1,14 +1,8 @@
 const path = require('path');
 
-module.exports = {
+const BASE_CONFIG = {
   mode: 'development',
   devtool: 'source-map',
-  entry: {
-    'localdev': './src/localdev.ts',
-    'polyfill-full': './src/polyfill-full.ts',
-    'polyfill-medium': './src/polyfill-medium.ts',
-    'polyfill-light': './src/polyfill-light.ts'
-  },
   resolve: {
     modules: ['../node_modules'],
     extensions: ['.ts', '.js']
@@ -32,9 +26,34 @@ module.exports = {
     removeAvailableModules: true,
     splitChunks: false
   },
+};
+
+module.exports = [{
+  ...BASE_CONFIG,
+  entry: {
+    'localdev': './src/localdev.ts',
+    'polyfill-full': './src/polyfill-full.ts',
+    'polyfill-medium': './src/polyfill-medium.ts',
+    'polyfill-light': './src/polyfill-light.ts'
+  },
   output: {
     path: path.resolve(__dirname, 'dist/bundles'),
     filename: '[name].js',
     chunkFilename: '[name].js'
   }
-};
+}, {
+  ...BASE_CONFIG,
+  entry: {
+    'lib': './src/playground/export/lib.ts',
+  },
+  experiments: {
+    outputModule: true,
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist/bundles'),
+    filename: '[name].js',
+    library: {
+      type: 'module'
+    }
+  }
+}];