WIP: buildless setup when consuming monorepo dependencies

.storybook/main.js

@@ -13,7 +13,11 @@ const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
  */
 
 /**
- * @typedef {{stories: string[] ; addons: string[]; typescript: StorybookTsConfig; babel: (options:Record<string,unknown>)=>Promise<Record<string,unknown>>; webpackFinal: StorybookWebpackConfig}} StorybookConfig
+ *  @typedef {(options: import('@babel/core').TransformOptions)=>Promise<typeof options>} StorybookBabelConfig
+ */
+
+/**
+ * @typedef {{stories: string[] ; addons: string[]; typescript: StorybookTsConfig; babel: StorybookBabelConfig; webpackFinal: StorybookWebpackConfig}} StorybookConfig
  */
 
 module.exports = /** @type {Pick<StorybookConfig,'addons' |'stories' |'webpackFinal'>} */ ({

package.json

@@ -72,6 +72,24 @@
     "vrtest": "cd apps && cd vr-tests && yarn screener"
   },
   "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+    "@babel/plugin-syntax-object-rest-spread": "7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@babel/register": "^7.10.4",
+    "@babel/standalone": "^7.10.4",
+    "@babel/generator": "^7.10.4",
+    "@babel/helper-plugin-utils": "^7.10.4",
+    "@babel/template": "^7.10.4",
+    "@babel/traverse": "^7.10.4",
+    "@linaria/babel": "3.0.0-beta.0",
+    "babel-plugin-tester": "10.0.0",
     "@microsoft/api-extractor": "7.13.0",
     "@storybook/addon-a11y": "6.0.28",
     "@storybook/addon-actions": "6.0.28",
@@ -136,6 +154,7 @@
     "webpack-cli": "4.3.1",
     "webpack-dev-server": "4.0.0-beta.0",
     "tmp": "0.2.1",
+    "tslib": "^2.1.0",
     "yargs": "13.3.2",
     "@nrwl/workspace": "12.1.0",
     "@nrwl/cli": "12.1.0",

packages/babel-make-styles/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/babel-make-styles",
   "version": "9.0.0-alpha.4",
   "description": "A Babel plugin that performs build time transforms for @fluentui/make-styles",
-  "main": "lib/src/index.js",
+  "main": "src/module.js",
   "typings": "lib/src/index.d.ts",
   "repository": {
     "type": "git",
@@ -21,15 +21,14 @@
     "@fluentui/eslint-plugin": "^1.2.0",
     "@fluentui/react-make-styles": "^9.0.0-alpha.30",
     "@fluentui/react-theme": "^9.0.0-alpha.10",
-    "@fluentui/scripts": "^1.0.0",
-    "babel-plugin-tester": "^10.0.0"
+    "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.10.4",
-    "@babel/generator": "^7.12.13",
-    "@babel/helper-plugin-utils": "^7.12.13",
-    "@babel/template": "^7.12.13",
-    "@babel/traverse": "^7.12.13",
+    "@babel/generator": "^7.10.4",
+    "@babel/helper-plugin-utils": "^7.10.4",
+    "@babel/template": "^7.10.4",
+    "@babel/traverse": "^7.10.4",
     "@fluentui/make-styles": "^9.0.0-alpha.18",
     "@linaria/babel": "^3.0.0-beta.0",
     "tslib": "^2.1.0"

packages/babel-make-styles/src/module.js

@@ -0,0 +1,17 @@
+// @ts-check
+const { findGitRoot } = require('@fluentui/scripts/monorepo');
+const babelRegister = require('@babel/register');
+
+const rootDir = findGitRoot();
+
+console.log('BABEL-MAKE-STYLES', { rootDir });
+
+babelRegister(
+  /** @type {import('@babel/core').TransformOptions & {extensions?:string[];cache?:boolean}} */ ({
+    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+    cwd: rootDir,
+    extensions: ['.jsx', '.js', '.tsx', '.ts'],
+  }),
+);
+
+module.exports = require('./index');

packages/make-styles/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/make-styles",
   "version": "9.0.0-alpha.18",
   "description": "Experimental utility for creating css styles/classes.",
-  "main": "lib-commonjs/index.js",
+  "main": "src/index.ts",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
   "sideEffects": false,

packages/make-styles/src/module.js

@@ -0,0 +1,17 @@
+// @ts-check
+const { findGitRoot } = require('@fluentui/scripts/monorepo');
+const babelRegister = require('@babel/register');
+
+const rootDir = findGitRoot();
+
+console.log('MAKE-STYLES', { rootDir });
+
+babelRegister(
+  /** @type {import('@babel/core').TransformOptions & {extensions?:string[];cache?:boolean}} */ ({
+    presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],
+    cwd: rootDir,
+    extensions: ['.jsx', '.js', '.tsx', '.ts'],
+  }),
+);
+
+module.exports = require('./index');

packages/react-menu/.storybook/main.js

@@ -1,8 +1,19 @@
+const fs = require('fs');
+const path = require('path');
 const rootMain = require('../../../.storybook/main');
 
-module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+const babelConfig = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../.babelrc.json'), 'utf-8'));
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal' |'babel'>} */ ({
   stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
+  babel: async config => {
+    if (config.plugins) {
+      config.plugins.push(...babelConfig.plugins);
+    }
+
+    return { ...config };
+  },
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 

scripts/package.json

@@ -14,18 +14,6 @@
     "code-style": "node ./just-scripts.js code-style"
   },
   "dependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-syntax-object-rest-spread": "7.8.3",
-    "@babel/plugin-transform-runtime": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/register": "^7.10.4",
-    "@babel/standalone": "^7.10.4",
     "@fluentui/eslint-plugin": "^1.2.0",
     "@mdx-js/loader": "^1.5.5",
     "@microsoft/load-themed-styles": "^1.10.26",

yarn.lock

@@ -179,6 +179,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.10.4", "@babel/generator@^7.14.0":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.1.tgz#1f99331babd65700183628da186f36f63d615c93"
+  integrity sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==
+  dependencies:
+    "@babel/types" "^7.14.1"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.9.6":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.0.tgz#bd00d4394ca22f220390c56a0b5b85568ec1ec0c"
@@ -353,6 +362,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
+  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
+
 "@babel/helper-validator-option@^7.12.16":
   version "7.12.16"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.16.tgz#f73cbd3bbba51915216c5dea908e9b206bb10051"
@@ -391,6 +405,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4"
   integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw==
 
+"@babel/parser@^7.14.0":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.1.tgz#1bd644b5db3f5797c4479d89ec1817fe02b84c47"
+  integrity sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q==
+
 "@babel/parser@^7.9.6":
   version "7.13.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.4.tgz#340211b0da94a351a6f10e63671fa727333d13ab"
@@ -1137,7 +1156,7 @@
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.10.4.tgz#63b9e211bee42e8ba8dfc1c0b68a856150e37bf2"
   integrity sha512-Cgnx+Z7dYqQrz42GPGzDFTph8n15NogWuR9OpocOVlRZQoRw4q+OmudevYAd6CjOVjGu6PgvJwojxCE34cfXPg==
 
-"@babel/template@>=7", "@babel/template@^7.12.13", "@babel/template@^7.4.0", "@babel/template@^7.8.0":
+"@babel/template@>=7", "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.4.0", "@babel/template@^7.8.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
   integrity sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==
@@ -1161,6 +1180,20 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.10.4":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.0.tgz#cea0dc8ae7e2b1dec65f512f39f3483e8cc95aef"
+  integrity sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@babel/generator" "^7.14.0"
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+    "@babel/parser" "^7.14.0"
+    "@babel/types" "^7.14.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.4", "@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.12.6", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.8.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.13.tgz#8be1aa8f2c876da11a9cf650c0ecf656913ad611"
@@ -1179,6 +1212,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.14.0", "@babel/types@^7.14.1":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.1.tgz#095bd12f1c08ab63eff6e8f7745fa7c9cc15a9db"
+  integrity sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.0"
+    to-fast-properties "^2.0.0"
+
 "@base2/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
@@ -2419,7 +2460,7 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@linaria/babel@^3.0.0-beta.0":
+"@linaria/babel@3.0.0-beta.0", "@linaria/babel@^3.0.0-beta.0":
   version "3.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/@linaria/babel/-/babel-3.0.0-beta.0.tgz#60ee6eb011017f918c4ebfe3ec66a44b20b1e40e"
   integrity sha512-IA2P9Es8iIfc/p12riN+hHVxrjIzkQ2xcdb2s8Ltszz21WN2I39WubDjk+DOUQAgLNoKH2HsgX0wWnW9zT4Bgw==
@@ -7345,7 +7386,7 @@ babel-plugin-syntax-jsx@^6.18.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
 
-babel-plugin-tester@^10.0.0:
+[email protected]:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-tester/-/babel-plugin-tester-10.0.0.tgz#7ece63c50ee76cc4b486f99d6a2a4cf78c836fe5"
   integrity sha512-RHlDIUtfdlFvUXHTWroyL3iz9OZnPYgcaDIUrp4ejXrzSClRx3ldJlhaOauvblJqZEPb/7HR32gLZT45lgOXFg==