@omnia/tooling-vue 8.0.114-vnext → 8.0.115-dev

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/internal-do-not-import-from-here/config/omnia.fx.core_a2892051-fd9f-4056-ae8d-30d16d48417d.manifest.json +1 -0
  2. package/internal-do-not-import-from-here/config/omnia.fx.ux.libs_0fe5c5f2-8d89-485b-afd4-36fe3ff5943a.manifest.json +1 -0
  3. package/internal-do-not-import-from-here/config/omnia.fx.ux_dee030cc-4ab3-4158-bb06-8049f5c67542.manifest.json +1 -0
  4. package/internal-do-not-import-from-here/config/omnia.fx_a5a89056-b5f5-475d-8518-a1f55090379d.manifest.json +1 -0
  5. package/internal-do-not-import-from-here/config/omnia.vendor.manifest.json +1 -1
  6. package/internal-do-not-import-from-here/config/tooling.output.json +1 -1
  7. package/internal-do-not-import-from-here/config/wctypings.d.ts +4564 -1719
  8. package/internal-do-not-import-from-here/shared.d.ts +32 -10
  9. package/internal-do-not-import-from-here/shared.js +315 -27
  10. package/internal-do-not-import-from-here/tasks/ComponentDocRegistrations.js +1 -1
  11. package/internal-do-not-import-from-here/tasks/bundle.js +108 -33
  12. package/internal-do-not-import-from-here/tasks/doc.d.ts +1 -0
  13. package/internal-do-not-import-from-here/tasks/doc.js +125 -183
  14. package/internal-do-not-import-from-here/tasks/vendor.js +17 -13
  15. package/internal-do-not-import-from-here/vite/hmr/graph.js +3 -1
  16. package/internal-do-not-import-from-here/vite/hmr/vueJsx.js +3 -2
  17. package/internal-do-not-import-from-here/vite/index.js +1 -1
  18. package/internal-do-not-import-from-here/vite/plugins/OmniaPlugin.js +1 -1
  19. package/internal-do-not-import-from-here/webpack-loaders/doc-loader.d.ts +1 -0
  20. package/internal-do-not-import-from-here/webpack-loaders/doc-loader.js +11 -0
  21. package/internal-do-not-import-from-here/webpack-loaders/esbuild-custom-loader.d.ts +1 -0
  22. package/internal-do-not-import-from-here/webpack-loaders/esbuild-custom-loader.js +10 -0
  23. package/internal-do-not-import-from-here/webpack-loaders/ts-loader.d.ts +5 -2
  24. package/internal-do-not-import-from-here/webpack-loaders/ts-loader.js +8 -0
  25. package/internal-do-not-import-from-here/webpack-loaders/tsx-loader.d.ts +3 -3
  26. package/internal-do-not-import-from-here/webpack-loaders/tsx-loader.js +9 -3
  27. package/internal-do-not-import-from-here/webpack-loaders/vue-component-loader.d.ts +1 -0
  28. package/internal-do-not-import-from-here/webpack-loaders/{wc-loader.js → vue-component-loader.js} +3 -1
  29. package/internal-do-not-import-from-here/webpack-plugins/stylexjs/index.d.ts +53 -0
  30. package/internal-do-not-import-from-here/webpack-plugins/stylexjs/index.js +194 -0
  31. package/internal-do-not-import-from-here/webpack-plugins/stylexjs/loader.d.ts +9 -0
  32. package/internal-do-not-import-from-here/webpack-plugins/stylexjs/loader.js +23 -0
  33. package/package.json +9 -10
  34. package/internal-do-not-import-from-here/webpack-loaders/wc-loader.d.ts +0 -1
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const $ = tslib_1.__importStar(require("../variables"));
5
5
  const ts_loader_1 = tslib_1.__importDefault(require("../webpack-loaders/ts-loader"));
6
+ const fsExtra = tslib_1.__importStar(require("fs-extra"));
6
7
  const ExtractTextPlugin = require('mini-css-extract-plugin');
7
- const fsExtra = require('fs-extra');
8
8
  const extractCSS = new ExtractTextPlugin({
9
9
  filename: "omnia.vendor.css",
10
10
  });
@@ -70,7 +70,7 @@ $.webpack({
70
70
  }
71
71
  },
72
72
  plugins: [
73
- new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/),
73
+ new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/), // we will load moment localize from cdn/localize
74
74
  extractCSS,
75
75
  new $.omniaWebpackPlugins.NamedModulesPlugin(),
76
76
  new $.omniaWebpackPlugins.ModifyContent([
@@ -118,7 +118,7 @@ $.webpack({
118
118
  var manifestPath = $.path.resolve(__dirname, "../config/omnia.shared.vendor.manifest.json");
119
119
  var manifestJson = require(manifestPath);
120
120
  manifestJson.content["./node_modules/webpack/buildin/module.js"] = undefined;
121
- $.fs.writeFileSync(manifestPath, JSON.stringify(manifestJson));
121
+ fsExtra.writeFileSync(manifestPath, JSON.stringify(manifestJson));
122
122
  $.tooling.log('omnia shared vendor generated');
123
123
  }
124
124
  });
@@ -173,8 +173,10 @@ $.webpack({
173
173
  },
174
174
  entry: {
175
175
  vendor: [
176
- "tslib",
177
- "./client/fx/vue/VueBundler",
176
+ "@stylexjs/stylex",
177
+ // "tslib",
178
+ "./client/fx/vue/VueBundler.ts",
179
+ "lodash.isequal",
178
180
  "typestyle",
179
181
  "csx",
180
182
  "zepto-webpack",
@@ -210,7 +212,7 @@ $.webpack({
210
212
  }
211
213
  },
212
214
  plugins: [
213
- new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/),
215
+ new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/), // we will load moment localize from cdn/localize
214
216
  extractCSS,
215
217
  new $.omniaWebpackPlugins.NamedModulesPlugin(),
216
218
  new $.omniaWebpackPlugins.ModifyContent([
@@ -272,7 +274,7 @@ return key;
272
274
  var manifestPath = $.path.resolve(__dirname, "../config/omnia.vendor.manifest.json");
273
275
  var manifestJson = require(manifestPath);
274
276
  manifestJson.content["./node_modules/webpack/buildin/module.js"] = undefined;
275
- $.fs.writeFileSync(manifestPath, JSON.stringify(manifestJson));
277
+ fsExtra.writeFileSync(manifestPath, JSON.stringify(manifestJson));
276
278
  $.tooling.log('omnia vendor devlopment generated');
277
279
  }
278
280
  });
@@ -327,8 +329,10 @@ $.webpack({
327
329
  },
328
330
  entry: {
329
331
  vendor: [
330
- "tslib",
331
- "./client/fx/vue/VueBundler",
332
+ "@stylexjs/stylex",
333
+ // "tslib",
334
+ "./client/fx/vue/VueBundler.ts",
335
+ "lodash.isequal",
332
336
  "typestyle",
333
337
  "csx",
334
338
  "zepto-webpack",
@@ -360,7 +364,7 @@ $.webpack({
360
364
  }
361
365
  },
362
366
  plugins: [
363
- new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/),
367
+ new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/), // we will load moment localize from cdn/localize
364
368
  extractCSS,
365
369
  new $.omniaWebpackPlugins.NamedModulesPlugin(),
366
370
  new $.omniaWebpackPlugins.ModifyContent([
@@ -422,7 +426,7 @@ return key;
422
426
  var manifestPath = $.path.resolve(__dirname, "../config/omnia.vendor.manifest.json");
423
427
  var manifestJson = require(manifestPath);
424
428
  manifestJson.content["./node_modules/webpack/buildin/module.js"] = undefined;
425
- $.fs.writeFileSync(manifestPath, JSON.stringify(manifestJson));
429
+ fsExtra.writeFileSync(manifestPath, JSON.stringify(manifestJson));
426
430
  $.tooling.log('omnia vendor prod generated');
427
431
  }
428
432
  });
@@ -494,7 +498,7 @@ $.webpack({
494
498
  }
495
499
  },
496
500
  plugins: [
497
- new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/),
501
+ new $.webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ignore/), // we will load moment localize from cdn/localize
498
502
  extractCSS,
499
503
  new $.omniaWebpackPlugins.NamedModulesPlugin(),
500
504
  new $.omniaWebpackPlugins.ModifyContent([
@@ -542,7 +546,7 @@ $.webpack({
542
546
  var manifestPath = $.path.resolve(__dirname, "../config/omnia.worker.vendor.manifest.json");
543
547
  var manifestJson = require(manifestPath);
544
548
  manifestJson.content["./node_modules/webpack/buildin/module.js"] = undefined;
545
- $.fs.writeFileSync(manifestPath, JSON.stringify(manifestJson));
549
+ fsExtra.writeFileSync(manifestPath, JSON.stringify(manifestJson));
546
550
  $.tooling.log('omnia worker vendor generated');
547
551
  }
548
552
  });
@@ -11,6 +11,7 @@ const manifest_1 = require("./manifest");
11
11
  const vueJsx_1 = require("./vueJsx");
12
12
  const $ = tslib_1.__importStar(require("../../variables"));
13
13
  const shared_1 = require("../../shared");
14
+ const doc_1 = require("../../tasks/doc");
14
15
  let fileGraphs = {};
15
16
  let manifests = {};
16
17
  const initialManifests = [
@@ -152,7 +153,7 @@ async function buildFileGraph(unknownId, code) {
152
153
  return { fileGraph, code };
153
154
  }
154
155
  fileGraph.js.scanned = true;
155
- code = (0, shared_1.modifyComponent)(code, fileGraph.id);
156
+ code = (0, shared_1.transformDefineVueComponent)(code, fileGraph.id);
156
157
  const esbuildTransformResult = await (0, vite_1.transformWithEsbuild)(code, id, esbuildTransformOptions);
157
158
  code = esbuildTransformResult.code;
158
159
  // d.ts or interface only
@@ -165,6 +166,7 @@ async function buildFileGraph(unknownId, code) {
165
166
  }
166
167
  fileGraph.js.metadata = utils_1.moduleAnalysis.analyze(code, id);
167
168
  ensureDependencies(id, fileGraph.js.metadata);
169
+ code = (0, doc_1.importSnippetCode)(code, fileGraph.id);
168
170
  return { fileGraph, code, esbuildTransformResult };
169
171
  }
170
172
  exports.buildFileGraph = buildFileGraph;
@@ -14,8 +14,9 @@ function transformVueJsx(code, id) {
14
14
  $.isExtensionEnv ?
15
15
  './node_modules/@omnia/tooling-vue/internal-do-not-import-from-here/babel/preset-jsx.js'
16
16
  : './client/tooling/vue/babel/preset-jsx.ts'
17
- ]
18
- ]
17
+ ],
18
+ ],
19
+ plugins: []
19
20
  });
20
21
  // check for hmr injection
21
22
  const declaredComponents = [];
@@ -16,7 +16,7 @@ async function createViteServer() {
16
16
  let plugins = [
17
17
  (0, plugins_1.omniaPlugin)({
18
18
  hosting: hosting
19
- })
19
+ }),
20
20
  ];
21
21
  if (hosting.enableProfiling) {
22
22
  plugins.push((0, vite_plugin_inspect_1.default)());
@@ -20,7 +20,7 @@ function omniaPlugin(options) {
20
20
  'vue': 'vue/dist/vue.runtime.esm-bundler.js',
21
21
  // 'vue-class-component': 'vue-class-component/dist/vue-class-component.esm.js',
22
22
  // 'vue-property-decorator': 'vue-property-decorator/lib/vue-property-decorator.js',
23
- 'vue-virtual-scroller': 'vue-virtual-scroller/dist/vue-virtual-scroller.esm.js',
23
+ // 'vue-virtual-scroller': 'vue-virtual-scroller/dist/vue-virtual-scroller.esm.js',
24
24
  'typestyle': 'typestyle/lib.es2015/index.js',
25
25
  'dayjs': 'dayjs/dayjs.min.js',
26
26
  // '@tiptap/core': '@tiptap/core/dist/index.js',
@@ -0,0 +1 @@
1
+ export default function (content: any, context: any): any;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const path_1 = tslib_1.__importDefault(require("path"));
5
+ const doc_1 = require("../tasks/doc");
6
+ function default_1(content, context) {
7
+ const filePath = "./" + path_1.default.relative(process.cwd(), this.resourcePath).replace(/\\/g, "/");
8
+ content = (0, doc_1.importSnippetCode)(content, filePath);
9
+ return content;
10
+ }
11
+ exports.default = default_1;
@@ -0,0 +1 @@
1
+ export default function (content: string, context: any): string;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ function default_1(content, context) {
4
+ if (!content) {
5
+ // console.log(this.resourcePath)
6
+ return "export {}";
7
+ }
8
+ return content;
9
+ }
10
+ exports.default = default_1;
@@ -1,6 +1,9 @@
1
1
  export default function (): {
2
2
  test: RegExp;
3
- use: {
3
+ use: ({
4
+ loader: any;
5
+ options?: undefined;
6
+ } | {
4
7
  loader: string;
5
8
  options: {
6
9
  loader: string;
@@ -13,5 +16,5 @@ export default function (): {
13
16
  };
14
17
  };
15
18
  };
16
- }[];
19
+ })[];
17
20
  }[];
@@ -1,10 +1,15 @@
1
1
  'use strict';
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const $ = tslib_1.__importStar(require("../variables"));
3
5
  var path = require('path');
4
6
  function default_1() {
5
7
  return [{
6
8
  test: /\.ts$/,
7
9
  use: [
10
+ {
11
+ loader: path.resolve(__dirname, $.isExtensionEnv ? './esbuild-custom-loader.js' : './esbuild-custom-loader.ts'),
12
+ },
8
13
  {
9
14
  loader: 'esbuild-loader',
10
15
  options: {
@@ -18,6 +23,9 @@ function default_1() {
18
23
  }
19
24
  }
20
25
  },
26
+ },
27
+ {
28
+ loader: path.resolve(__dirname, $.isExtensionEnv ? './doc-loader.js' : './doc-loader.ts'),
21
29
  }
22
30
  ]
23
31
  }];
@@ -8,6 +8,9 @@ export default function (): {
8
8
  plugins: any[];
9
9
  presets: string[][];
10
10
  };
11
+ } | {
12
+ loader: any;
13
+ options?: undefined;
11
14
  } | {
12
15
  loader: string;
13
16
  options: {
@@ -22,8 +25,5 @@ export default function (): {
22
25
  };
23
26
  };
24
27
  };
25
- } | {
26
- loader: any;
27
- options?: undefined;
28
28
  })[];
29
29
  }[];
@@ -47,6 +47,12 @@ function default_1() {
47
47
  // }
48
48
  // }
49
49
  // },
50
+ {
51
+ loader: path.resolve(__dirname, $.isExtensionEnv ? './esbuild-custom-loader.js' : './esbuild-custom-loader.ts'),
52
+ },
53
+ {
54
+ loader: path.resolve(__dirname, $.isExtensionEnv ? './vue-component-loader.js' : './vue-component-loader.ts'),
55
+ },
50
56
  {
51
57
  loader: 'esbuild-loader',
52
58
  options: {
@@ -62,9 +68,9 @@ function default_1() {
62
68
  }
63
69
  },
64
70
  },
65
- {
66
- loader: path.resolve(__dirname, $.isExtensionEnv ? './wc-loader.js' : './wc-loader.ts'),
67
- }
71
+ // {
72
+ // loader: path.resolve(__dirname, $.isExtensionEnv ? './vue-component-loader.js' : './vue-component-loader.ts'),
73
+ // }
68
74
  ];
69
75
  return [
70
76
  {
@@ -0,0 +1 @@
1
+ export default function (content: any, context: any): any;
@@ -4,6 +4,8 @@ const tslib_1 = require("tslib");
4
4
  const path_1 = tslib_1.__importDefault(require("path"));
5
5
  const shared_1 = require("../shared");
6
6
  function default_1(content, context) {
7
- return (0, shared_1.modifyComponent)(content, "./" + path_1.default.relative(process.cwd(), this.resourcePath).replace(/\\/g, "/"));
7
+ const filePath = "./" + path_1.default.relative(process.cwd(), this.resourcePath).replace(/\\/g, "/");
8
+ content = (0, shared_1.transformDefineVueComponent)(content, filePath);
9
+ return content;
8
10
  }
9
11
  exports.default = default_1;
@@ -0,0 +1,53 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+ type PluginOptions = {
10
+ dev?: boolean;
11
+ stylexImports?: string[];
12
+ babelConfig?: {
13
+ plugins?: any;
14
+ presets?: any;
15
+ babelrc?: boolean;
16
+ };
17
+ filename?: string;
18
+ appendTo?: string;
19
+ useCSSLayers?: boolean;
20
+ runtimeInjection?: boolean;
21
+ classNamePrefix?: string;
22
+ unstable_moduleResolution?: any;
23
+ };
24
+ export declare class StylexPlugin {
25
+ stylexRules: {};
26
+ filesInLastRun: any;
27
+ dev: boolean;
28
+ appendTo: any;
29
+ filename: string;
30
+ stylexImports: string[];
31
+ unstable_moduleResolution: {
32
+ type: string;
33
+ rootDir: string;
34
+ };
35
+ babelConfig: {
36
+ plugins: any[];
37
+ presets: any[];
38
+ babelrc: boolean;
39
+ };
40
+ useCSSLayers: boolean;
41
+ defaultOptions: PluginOptions;
42
+ babelPlugin: any;
43
+ constructor(options?: PluginOptions);
44
+ apply(compiler: any): void;
45
+ transformCode(inputCode: string, filename: any, logger: any): Promise<{
46
+ code: any;
47
+ map: any;
48
+ } | {
49
+ code: string;
50
+ map?: undefined;
51
+ }>;
52
+ }
53
+ export {};
@@ -0,0 +1,194 @@
1
+ "use strict";
2
+ /**
3
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
4
+ *
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ *
8
+ *
9
+ */
10
+ Object.defineProperty(exports, "__esModule", { value: true });
11
+ exports.StylexPlugin = void 0;
12
+ const tslib_1 = require("tslib");
13
+ const core_1 = require("@babel/core");
14
+ const path_1 = tslib_1.__importDefault(require("path"));
15
+ const babel_plugin_1 = tslib_1.__importDefault(require("@stylexjs/babel-plugin"));
16
+ const webpack_1 = tslib_1.__importDefault(require("webpack"));
17
+ // import * as flowSyntaxPlugin from '@babel/plugin-syntax-flow';
18
+ // import * as jsxSyntaxPlugin from '@babel/plugin-syntax-jsx';
19
+ // import * as typescriptSyntaxPlugin from '@babel/plugin-syntax-typescript';
20
+ const promises_1 = tslib_1.__importDefault(require("fs/promises"));
21
+ const $ = tslib_1.__importStar(require("../../variables"));
22
+ const { NormalModule, Compilation } = webpack_1.default;
23
+ const PLUGIN_NAME = 'stylex';
24
+ const IS_DEV_ENV = process.env.NODE_ENV === 'development' ||
25
+ process.env.BABEL_ENV === 'development';
26
+ const { RawSource, ConcatSource } = webpack_1.default.sources;
27
+ class StylexPlugin {
28
+ constructor(options = {}) {
29
+ this.stylexRules = {};
30
+ this.filesInLastRun = null;
31
+ this.dev = IS_DEV_ENV;
32
+ this.appendTo = null;
33
+ this.filename = "stylex.css";
34
+ this.stylexImports = ['stylex', '@stylexjs/stylex'];
35
+ this.unstable_moduleResolution = { type: 'commonJS', rootDir: process.cwd() };
36
+ this.babelConfig = { plugins: [], presets: [], babelrc: false };
37
+ this.useCSSLayers = false;
38
+ this.defaultOptions = {
39
+ dev: IS_DEV_ENV,
40
+ appendTo: null,
41
+ filename: "stylex.css",
42
+ stylexImports: ['stylex', '@stylexjs/stylex'],
43
+ unstable_moduleResolution: { type: 'commonJS', rootDir: process.cwd() },
44
+ babelConfig: { plugins: [], presets: [], babelrc: false },
45
+ useCSSLayers: false
46
+ };
47
+ Object.assign(this, this.defaultOptions, options);
48
+ this.babelPlugin = [
49
+ babel_plugin_1.default,
50
+ {
51
+ dev: this.dev,
52
+ unstable_moduleResolution: this.unstable_moduleResolution,
53
+ importSources: this.stylexImports,
54
+ ...options,
55
+ },
56
+ ];
57
+ }
58
+ apply(compiler) {
59
+ compiler.hooks.make.tap(PLUGIN_NAME, (compilation) => {
60
+ // Apply loader to JS modules.
61
+ NormalModule.getCompilationHooks(compilation).loader.tap(PLUGIN_NAME, (loaderContext, module) => {
62
+ if (
63
+ // .js, .jsx, .mjs, .cjs, .ts, .tsx, .mts, .cts
64
+ /\.ts[x]?$/.test(path_1.default.extname(module.resource))) {
65
+ // It might make sense to use .push() here instead of .unshift()
66
+ // Webpack usually runs loaders in reverse order and we want to ideally run
67
+ // our loader before anything else.
68
+ module.loaders.unshift({
69
+ loader: path_1.default.resolve(__dirname, $.isExtensionEnv ? 'loader.js' : 'loader.ts'),
70
+ options: { stylexPlugin: this },
71
+ });
72
+ }
73
+ });
74
+ // Make a list of all modules that were included in the last compilation.
75
+ // This might need to be tweaked if not all files are included after a change
76
+ compilation.hooks.finishModules.tap(PLUGIN_NAME, (modules) => {
77
+ this.filesInLastRun = [...modules.values()].map((m) => m.resource);
78
+ });
79
+ const getStyleXRules = () => {
80
+ const { stylexRules } = this;
81
+ if (Object.keys(stylexRules).length === 0) {
82
+ return null;
83
+ }
84
+ // Take styles for the modules that were included in the last compilation.
85
+ const allRules = Object.keys(stylexRules)
86
+ .filter((filename) => this.filesInLastRun == null
87
+ ? true
88
+ : this.filesInLastRun.includes(filename))
89
+ .map((filename) => stylexRules[filename])
90
+ .flat();
91
+ return babel_plugin_1.default.processStylexRules(allRules, this.useCSSLayers);
92
+ };
93
+ if (this.appendTo) {
94
+ compilation.hooks.processAssets.tap({
95
+ name: PLUGIN_NAME,
96
+ stage: Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS, // see below for more stages
97
+ }, (assets) => {
98
+ const cssFileName = Object.keys(assets).find(typeof this.appendTo === 'function'
99
+ ? this.appendTo
100
+ : (filename) => filename.endsWith(this.appendTo));
101
+ if (cssFileName) {
102
+ const cssAsset = assets[cssFileName];
103
+ const stylexCSS = getStyleXRules();
104
+ if (stylexCSS != null) {
105
+ assets[cssFileName] = new ConcatSource(cssAsset, new RawSource(stylexCSS));
106
+ }
107
+ }
108
+ });
109
+ }
110
+ else {
111
+ // We'll emit an asset ourselves. This comes with some complications in from Webpack.
112
+ // If the filename contains replacement tokens, like [contenthash], we need to
113
+ // process those tokens ourselves. Webpack does provide a way to reuse the configured
114
+ // hashing functions. We'll take advantage of that to process tokens.
115
+ const getContentHash = (source) => {
116
+ const { outputOptions } = compilation;
117
+ const { hashDigest, hashDigestLength, hashFunction, hashSalt } = outputOptions;
118
+ const hash = compiler.webpack.util.createHash(hashFunction);
119
+ if (hashSalt) {
120
+ hash.update(hashSalt);
121
+ }
122
+ hash.update(source);
123
+ const fullContentHash = hash.digest(hashDigest);
124
+ return fullContentHash.toString().slice(0, hashDigestLength);
125
+ };
126
+ // Consume collected rules and emit the stylex CSS asset
127
+ compilation.hooks.processAssets.tap({
128
+ name: PLUGIN_NAME,
129
+ stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
130
+ }, () => {
131
+ try {
132
+ const collectedCSS = getStyleXRules();
133
+ if (collectedCSS) {
134
+ // build up a content hash for the rules using webpack's configured hashing functions
135
+ const contentHash = getContentHash(collectedCSS);
136
+ // pretend to be a chunk so we can reuse the webpack routine to process the filename and do token replacement
137
+ // see https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L4733
138
+ // see https://github.com/webpack/webpack/blob/main/lib/TemplatedPathPlugin.js#L102
139
+ const data = {
140
+ filename: this.filename,
141
+ contentHash: contentHash,
142
+ chunk: {
143
+ id: this.filename,
144
+ name: path_1.default.parse(this.filename).name,
145
+ hash: contentHash,
146
+ },
147
+ };
148
+ const { path: hashedPath, info: assetsInfo } = compilation.getPathWithInfo(data.filename, data);
149
+ compilation.emitAsset(hashedPath, new RawSource(collectedCSS), assetsInfo);
150
+ }
151
+ }
152
+ catch (e) {
153
+ compilation.errors.push(e);
154
+ }
155
+ });
156
+ }
157
+ });
158
+ }
159
+ // This function is not called by Webpack directly.
160
+ // Instead, `NormalModule.getCompilationHooks` is used to inject a loader
161
+ // for JS modules. The loader than calls this function.
162
+ async transformCode(inputCode, filename, logger) {
163
+ if (this.stylexImports.some((importName) => inputCode.includes(importName))) {
164
+ const originalSource = this.babelConfig.babelrc
165
+ ? await promises_1.default.readFile(filename, 'utf8')
166
+ : inputCode;
167
+ const { code, map, metadata } = await (0, core_1.transformAsync)(originalSource, {
168
+ babelrc: this.babelConfig.babelrc,
169
+ filename,
170
+ // Use TypeScript syntax plugin if the filename ends with `.ts` or `.tsx`
171
+ // and use the Flow syntax plugin otherwise.
172
+ plugins: [
173
+ // ...this.babelConfig.plugins,
174
+ // path.extname(filename) === '.ts'
175
+ // ? typescriptSyntaxPlugin
176
+ // : path.extname(filename) === '.tsx'
177
+ // ? [typescriptSyntaxPlugin, { isTSX: true }]
178
+ // : flowSyntaxPlugin,
179
+ // jsxSyntaxPlugin,
180
+ this.babelPlugin,
181
+ ],
182
+ presets: this.babelConfig.presets,
183
+ });
184
+ if (metadata.stylex != null && metadata.stylex.length > 0) {
185
+ this.stylexRules[filename] = metadata.stylex;
186
+ }
187
+ if (!this.babelConfig.babelrc) {
188
+ return { code, map };
189
+ }
190
+ }
191
+ return { code: inputCode };
192
+ }
193
+ }
194
+ exports.StylexPlugin = StylexPlugin;
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+ export default function stylexLoader(inputCode: any): void;
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+ 'use strict';
10
+ Object.defineProperty(exports, "__esModule", { value: true });
11
+ const PLUGIN_NAME = 'stylex';
12
+ function stylexLoader(inputCode) {
13
+ const callback = this.async();
14
+ const { stylexPlugin } = this.getOptions();
15
+ const logger = this._compiler.getInfrastructureLogger(PLUGIN_NAME);
16
+ stylexPlugin.transformCode(inputCode, this.resourcePath, logger).then(({ code, map }) => {
17
+ callback(null, code, map);
18
+ }, (error) => {
19
+ callback(error);
20
+ });
21
+ }
22
+ exports.default = stylexLoader;
23
+ ;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/tooling-vue",
3
3
  "license": "MIT",
4
- "version": "8.0.114-vnext",
4
+ "version": "8.0.115-dev",
5
5
  "description": "Used to bundle and serve manifests web component that build on Vue framework.",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -19,12 +19,12 @@
19
19
  ],
20
20
  "author": "Precio Fishbone",
21
21
  "dependencies": {
22
- "@omnia/fx-models": "8.0.114-vnext",
23
- "@omnia/tooling-composers": "8.0.114-vnext",
22
+ "@omnia/fx-models": "8.0.115-dev",
23
+ "@omnia/tooling-composers": "8.0.115-dev",
24
24
  "@types/mousetrap": "1.5.34",
25
25
  "@types/quill": "1.3.6",
26
26
  "@types/zepto": "1.0.29",
27
- "@babel/core": "7.16.5",
27
+ "@babel/core": "7.23.7",
28
28
  "babel-loader": "8.3.0",
29
29
  "@vue/babel-plugin-jsx": "1.1.1",
30
30
  "circular-dependency-plugin": "5.2.2",
@@ -33,7 +33,6 @@
33
33
  "css-loader": "5.0.1",
34
34
  "file-loader": "6.2.0",
35
35
  "json-parse-better-errors": "1.0.2",
36
- "null-loader": "4.0.1",
37
36
  "terser": "5.17.1",
38
37
  "less-loader": "10.2.0",
39
38
  "mini-css-extract-plugin": "1.3.3",
@@ -46,7 +45,7 @@
46
45
  "prettier": "1.17.0",
47
46
  "typestyle": "2.4.0",
48
47
  "url-loader": "4.1.1",
49
- "webpack": "5.82.0",
48
+ "webpack": "5.89.0",
50
49
  "webpack-core": "0.6.9",
51
50
  "webpack-dev-middleware": "5.3.1",
52
51
  "webpack-merge": "5.8.0",
@@ -57,11 +56,11 @@
57
56
  "es6-promise": "4.2.4",
58
57
  "hash-sum": "1.0.2",
59
58
  "lodash": "4.17.21",
60
- "vite": "4.4.1",
61
- "vite-plugin-inspect": "0.7.32",
59
+ "vite": "5.0.12",
60
+ "vite-plugin-inspect": "0.8.1",
62
61
  "appdata-path": "1.0.0",
63
- "json-parse-better-errors": "1.0.2",
64
- "url": "0.11.0"
62
+ "url": "0.11.0",
63
+ "@stylexjs/babel-plugin": "0.4.1"
65
64
  },
66
65
  "bugs": {
67
66
  "url": "https://github.com/preciofishbone/OmniaFx/issues"
@@ -1 +0,0 @@
1
- export default function (content: any, context: any): string;