@omnia/tooling-vue 7.0.533-dev → 8.0.1-vnext

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 (25) hide show
  1. package/internal-do-not-import-from-here/1cacb55c-202b-4cd7-819d-11bad92fa9cb.wctypings.d.ts +1 -1
  2. package/internal-do-not-import-from-here/babel/preset-jsx.d.ts +2 -8
  3. package/internal-do-not-import-from-here/babel/preset-jsx.js +7 -105
  4. package/internal-do-not-import-from-here/bb000000-0000-bbbb-0000-0000000000bb.wcdefinitions.json +1 -1
  5. package/internal-do-not-import-from-here/bb000000-0000-bbbb-0000-0000000000bb.wctypings.d.ts +128 -129
  6. package/internal-do-not-import-from-here/config/omnia.vendor.manifest.json +1 -1
  7. package/internal-do-not-import-from-here/shared.d.ts +32 -5
  8. package/internal-do-not-import-from-here/shared.js +2 -3
  9. package/internal-do-not-import-from-here/tasks/bundle.js +16 -11
  10. package/internal-do-not-import-from-here/tasks/vendor.js +14 -34
  11. package/internal-do-not-import-from-here/vite/hmr/graph.js +1 -1
  12. package/internal-do-not-import-from-here/vite/hmr/runtime.js +3 -1
  13. package/internal-do-not-import-from-here/vite/hmr/transformers/importPath.js +1 -1
  14. package/internal-do-not-import-from-here/vite/hmr/transformers/internal/dynamicBundle.js +14 -3
  15. package/internal-do-not-import-from-here/vite/hmr/transformers/internal/omniaRuntime.js +8 -8
  16. package/internal-do-not-import-from-here/vite/hmr/utils/path.js +5 -2
  17. package/internal-do-not-import-from-here/vite/hmr/vueJsx.d.ts +4 -3
  18. package/internal-do-not-import-from-here/vite/hmr/vueJsx.js +161 -55
  19. package/internal-do-not-import-from-here/vite/middlewares/HmrMiddleware.js +15 -5
  20. package/internal-do-not-import-from-here/vite/middlewares/StaticFileMiddleware.js +1 -1
  21. package/internal-do-not-import-from-here/vite/plugins/OmniaPlugin.js +7 -7
  22. package/internal-do-not-import-from-here/webpack-loaders/ingore-vuetify-locale.js +1 -1
  23. package/internal-do-not-import-from-here/webpack-loaders/tsx-loader.d.ts +15 -4
  24. package/internal-do-not-import-from-here/webpack-loaders/tsx-loader.js +5 -9
  25. package/package.json +6 -6
@@ -1,67 +1,27 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.injectHotReloadScript = exports.transformVueJsx = void 0;
3
+ exports.transformVueJsx = void 0;
4
4
  const tslib_1 = require("tslib");
5
- const hash_sum_1 = tslib_1.__importDefault(require("hash-sum"));
5
+ const node_crypto_1 = require("node:crypto");
6
6
  const core_1 = require("@babel/core");
7
- const fx_models_1 = require("@omnia/fx-models");
8
7
  const $ = tslib_1.__importStar(require("../../variables"));
9
- async function transformVueJsx(code, id) {
10
- const babelTransformResult = await (0, core_1.transformAsync)(code, {
8
+ function transformVueJsx(code, id) {
9
+ const result = (0, core_1.transformSync)(code, {
11
10
  ast: true,
12
11
  presets: [
13
12
  [
14
13
  // '@vue/babel-preset-jsx',
15
14
  $.isExtensionEnv ?
16
15
  './node_modules/@omnia/tooling-vue/internal-do-not-import-from-here/babel/preset-jsx.js'
17
- : './client/tooling/vue/babel/preset-jsx.ts',
18
- {
19
- vModel: true,
20
- compositionAPI: true,
21
- }
16
+ : './client/tooling/vue/babel/preset-jsx.ts'
22
17
  ]
23
18
  ]
24
19
  });
25
- injectHotReloadScript(babelTransformResult, code, id);
26
- return babelTransformResult.code;
27
- }
28
- exports.transformVueJsx = transformVueJsx;
29
- // Customized from plugin-vue-jsx https://github.com/vitejs/vite/blob/main/packages/plugin-vue-jsx/index.js
30
- function injectHotReloadScript(babelFile, code, id) {
31
- const [hotComponents, hasDefault] = getHotComponents(babelFile, code, id);
32
- if (hotComponents.length) {
33
- if (hasDefault) {
34
- babelFile.code = babelFile.code.replace(/export default defineVueComponent/g, `const __default__ = defineVueComponent`);
35
- babelFile.code = babelFile.code.replace(/export default defineVueWebComponent/g, `const __default__ = defineVueWebComponent`);
36
- }
37
- if (!/\?vue&type=script/.test(id)) {
38
- let code = babelFile.code;
39
- let callbackCode = ``;
40
- code = '\n' +
41
- `const __VUE_HOT_RELOAD_API__ = omniaWebpackJsonp['bb000000-0000-bbbb-0000-0000000000bb']['${fx_models_1.OmniaResourceManifests.HMR}']('f8ee4fc2-3876-4997-80d7-5264eaee44bb');` + '\n' + code;
42
- for (const { local, exported, id } of hotComponents) {
43
- code +=
44
- `\n\n/**\n * Vue Hot Reload\n */\n${local}.__hmrId = "${id}";` +
45
- `\n__VUE_HOT_RELOAD_API__.createRecord("${id}", ${local});`;
46
- callbackCode = callbackCode + '\n\n' +
47
- ` __VUE_HOT_RELOAD_API__.reload("${id}", __${exported});`;
48
- }
49
- code += `\nimport.meta.hot.accept(({${hotComponents
50
- .map((c) => `${c.exported}: __${c.exported}`)
51
- .join(',')}}) => {${callbackCode}\n});`;
52
- babelFile.code = code;
53
- }
54
- if (hasDefault) {
55
- babelFile.code += `\n\nexport default __default__;`;
56
- }
57
- }
58
- }
59
- exports.injectHotReloadScript = injectHotReloadScript;
60
- function getHotComponents(babelFile, code, id) {
61
- let hasDefault = false;
20
+ // check for hmr injection
62
21
  const declaredComponents = [];
63
22
  const hotComponents = [];
64
- for (const node of babelFile.ast.program.body) {
23
+ let hasDefault = false;
24
+ for (const node of result.ast.program.body) {
65
25
  if (node.type === 'VariableDeclaration') {
66
26
  const names = parseComponentDecls(node, code);
67
27
  if (names.length) {
@@ -70,11 +30,22 @@ function getHotComponents(babelFile, code, id) {
70
30
  }
71
31
  if (node.type === 'ExportNamedDeclaration') {
72
32
  if (node.declaration &&
73
- node.declaration.type === 'VariableDeclaration') {
33
+ (node.declaration.type === 'ClassDeclaration')) {
34
+ if (node.declaration.superClass?.type === 'Identifier'
35
+ && node.declaration.superClass?.name === 'VueComponentBase') {
36
+ hotComponents.push({
37
+ local: node.declaration.id.name,
38
+ exported: node.declaration.id.name,
39
+ id: getHash(id + node.declaration.id.name)
40
+ });
41
+ }
42
+ }
43
+ else if (node.declaration &&
44
+ (node.declaration.type === 'VariableDeclaration')) {
74
45
  hotComponents.push(...parseComponentDecls(node.declaration, code).map(({ name }) => ({
75
46
  local: name,
76
47
  exported: name,
77
- id: (0, hash_sum_1.default)(id + name)
48
+ id: getHash(id + name),
78
49
  })));
79
50
  }
80
51
  else if (node.specifiers.length) {
@@ -86,7 +57,7 @@ function getHotComponents(babelFile, code, id) {
86
57
  hotComponents.push({
87
58
  local: spec.local.name,
88
59
  exported: spec.exported.name,
89
- id: (0, hash_sum_1.default)(id + spec.exported.name)
60
+ id: getHash(id + spec.exported.name),
90
61
  });
91
62
  }
92
63
  }
@@ -101,22 +72,154 @@ function getHotComponents(babelFile, code, id) {
101
72
  hotComponents.push({
102
73
  local: node.declaration.name,
103
74
  exported: 'default',
104
- id: (0, hash_sum_1.default)(id + 'default')
75
+ id: getHash(id + 'default'),
105
76
  });
106
77
  }
107
78
  }
108
- else if (isDefineComponentCall(node.declaration)) {
79
+ else if (isDefineComponentCall(node.declaration) || isClassComponentCall(node.declaration)) {
109
80
  hasDefault = true;
110
81
  hotComponents.push({
111
82
  local: '__default__',
112
83
  exported: 'default',
113
- id: (0, hash_sum_1.default)(id + 'default')
84
+ id: getHash(id + 'default'),
114
85
  });
115
86
  }
116
87
  }
117
88
  }
118
- return [hotComponents, hasDefault];
89
+ if (hotComponents.length) {
90
+ if (hasDefault) {
91
+ result.code =
92
+ result.code.replace(/export default defineVueWebComponent/g, `const __default__ = defineVueWebComponent`).replace(/export default defineVueComponent/g, `const __default__ = defineVueComponent`) + `\nexport default __default__`;
93
+ }
94
+ if (!/\?vue&type=script/.test(id)) {
95
+ let code = result.code;
96
+ let callbackCode = ``;
97
+ for (const { local, exported, id } of hotComponents) {
98
+ code +=
99
+ `\n${local}.__hmrId = "${id}"` +
100
+ `\n__VUE_HMR_RUNTIME__.createRecord("${id}", ${local})`;
101
+ callbackCode += `\n__VUE_HMR_RUNTIME__.reload("${id}", __${exported})`;
102
+ }
103
+ code += `\nimport.meta.hot.accept(({${hotComponents
104
+ .map((c) => `${c.exported}: __${c.exported}`)
105
+ .join(',')}}) => {${callbackCode}\n})`;
106
+ result.code = code;
107
+ }
108
+ }
109
+ if (!result.code)
110
+ return;
111
+ return {
112
+ code: result.code,
113
+ map: result.map,
114
+ };
119
115
  }
116
+ exports.transformVueJsx = transformVueJsx;
117
+ // Customized from plugin-vue-jsx https://github.com/vitejs/vite/blob/main/packages/plugin-vue-jsx/index.js
118
+ // export function injectHotReloadScript(babelFile: BabelFileResult, code: string, id: string) {
119
+ // const [hotComponents, hasDefault] = getHotComponents(babelFile, code, id);
120
+ // if (hotComponents.length) {
121
+ // if (hasDefault) {
122
+ // babelFile.code = babelFile.code.replace(
123
+ // /export default defineVueComponent/g,
124
+ // `const __default__ = defineVueComponent`
125
+ // );
126
+ // babelFile.code = babelFile.code.replace(
127
+ // /export default defineVueWebComponent/g,
128
+ // `const __default__ = defineVueWebComponent`
129
+ // );
130
+ // }
131
+ // if (!/\?vue&type=script/.test(id)) {
132
+ // let code = babelFile.code;
133
+ // let callbackCode = ``;
134
+ // code = '\n' +
135
+ // `const __VUE_HOT_RELOAD_API__ = omniaWebpackJsonp['bb000000-0000-bbbb-0000-0000000000bb']['${OmniaResourceManifests.HMR}']('f8ee4fc2-3876-4997-80d7-5264eaee44bb');` + '\n' + code;
136
+ // for (const { local, exported, id } of hotComponents) {
137
+ // code +=
138
+ // `\n\n/**\n * Vue Hot Reload\n */\n${local}.__hmrId = "${id}";` +
139
+ // `\n__VUE_HOT_RELOAD_API__.createRecord("${id}", ${local});`;
140
+ // callbackCode = callbackCode + '\n\n' +
141
+ // ` __VUE_HOT_RELOAD_API__.reload("${id}", __${exported});`;
142
+ // }
143
+ // code += `\nimport.meta.hot.accept(({${hotComponents
144
+ // .map((c) => `${c.exported}: __${c.exported}`)
145
+ // .join(',')}}) => {${callbackCode}\n});`;
146
+ // babelFile.code = code;
147
+ // }
148
+ // if (hasDefault) {
149
+ // babelFile.code += `\n\nexport default __default__;`;
150
+ // }
151
+ // }
152
+ // }
153
+ // function getHotComponents(babelFile: BabelFileResult, code: string, id: string): [Array<HotComponent>, boolean] {
154
+ // let hasDefault = false;
155
+ // const declaredComponents: Array<{ name: string }> = [];
156
+ // const hotComponents: Array<HotComponent> = [];
157
+ // for (const node of babelFile.ast.program.body) {
158
+ // if (node.type === 'VariableDeclaration') {
159
+ // const names = parseComponentDecls(node, code)
160
+ // if (names.length) {
161
+ // declaredComponents.push(...names)
162
+ // }
163
+ // }
164
+ // if (node.type === 'ExportNamedDeclaration') {
165
+ // if (
166
+ // node.declaration &&
167
+ // node.declaration.type === 'VariableDeclaration'
168
+ // ) {
169
+ // hotComponents.push(
170
+ // ...parseComponentDecls(node.declaration, code).map(
171
+ // ({ name }) => ({
172
+ // local: name,
173
+ // exported: name,
174
+ // id: hash(id + name)
175
+ // })
176
+ // )
177
+ // )
178
+ // } else if (node.specifiers.length) {
179
+ // for (const spec of node.specifiers) {
180
+ // if (
181
+ // spec.type === 'ExportSpecifier' &&
182
+ // spec.exported.type === 'Identifier'
183
+ // ) {
184
+ // const matched = declaredComponents.find(
185
+ // ({ name }) => name === spec.local.name
186
+ // )
187
+ // if (matched) {
188
+ // hotComponents.push({
189
+ // local: spec.local.name,
190
+ // exported: spec.exported.name,
191
+ // id: hash(id + spec.exported.name)
192
+ // })
193
+ // }
194
+ // }
195
+ // }
196
+ // }
197
+ // }
198
+ // if (node.type === 'ExportDefaultDeclaration') {
199
+ // if (node.declaration.type === 'Identifier') {
200
+ // const _name = node.declaration.name
201
+ // const matched = declaredComponents.find(
202
+ // ({ name }) => name === _name
203
+ // )
204
+ // if (matched) {
205
+ // hotComponents.push({
206
+ // local: node.declaration.name,
207
+ // exported: 'default',
208
+ // id: hash(id + 'default')
209
+ // })
210
+ // }
211
+ // } else if (isDefineComponentCall(node.declaration)) {
212
+ // hasDefault = true
213
+ // hotComponents.push({
214
+ // local: '__default__',
215
+ // exported: 'default',
216
+ // id: hash(id + 'default')
217
+ // })
218
+ // }
219
+ // }
220
+ // }
221
+ // return [hotComponents, hasDefault];
222
+ // }
120
223
  function parseComponentDecls(node, source) {
121
224
  const names = [];
122
225
  for (const decl of node.declarations) {
@@ -141,3 +244,6 @@ function isClassComponentCall(node) {
141
244
  node.superClass.type === 'Identifier' &&
142
245
  (node.superClass.name === 'VueComponentBase' || node.superClass.name === 'Vue'));
143
246
  }
247
+ function getHash(text) {
248
+ return (0, node_crypto_1.createHash)('sha256').update(text).digest('hex').substring(0, 8);
249
+ }
@@ -108,14 +108,24 @@ function registerHmrMiddleware(server) {
108
108
  });
109
109
  server.middlewares.use(utils_1.pathUtils.HMR_DYNAMIC_BUNDLE_REQUEST, async (req, res, next) => {
110
110
  res.setHeader('Content-Type', 'application/x-javascript');
111
+ const ext = req.url.split(".").pop();
111
112
  const { resourceId, fromWorker } = utils_1.pathUtils.parseHmrDynamicBundlePath(req.url);
112
113
  const bundleDirPath = utils_1.envUtils.getBundleOutputDirPath();
113
- const bundleFileName = `dynamicbundle_${resourceId}.js`;
114
+ const bundleFileName = `dynamicbundle_${resourceId}.${ext}`;
114
115
  const bundlePath = path_1.default.join(bundleDirPath, bundleFileName);
115
- let script = await fs_1.default.promises.readFile(bundlePath, 'utf8');
116
- // webpack bundled as commonjs so we need to make this as es module
117
- script = script + '\n\n' + `//Empty export to make this as es module\nexport {}`;
118
- res.end(script);
116
+ let content = await fs_1.default.promises.readFile(bundlePath, 'utf8');
117
+ if (ext === "js") {
118
+ // webpack bundled as commonjs so we need to make this as es module
119
+ content = content + '\n\n' + `//Empty export to make this as es module\nexport {}`;
120
+ //res.end(content);
121
+ }
122
+ else if (ext === "css") {
123
+ content = `import { updateStyle as __vite__updateStyle} from "/@vite/client"; __vite__updateStyle("${bundleFileName}", \`${content}\`)`;
124
+ // req.url = `/omnia/dist/hmr/bundles/${bundleFileName}`;
125
+ // console.log("Hmr middleware", req.url)
126
+ // next();
127
+ }
128
+ res.end(content);
119
129
  });
120
130
  }
121
131
  exports.registerHmrMiddleware = registerHmrMiddleware;
@@ -15,7 +15,7 @@ function registerStaticFileMiddleware(server) {
15
15
  }
16
16
  else if (req.url.indexOf('/omnia/bundles') === 0) {
17
17
  // format: /omnia/bundles/{manifestId}/{bundleType}?{queryString}
18
- let fullpath = req.originalUrl.toLowerCase();
18
+ let fullpath = req.url.toLowerCase();
19
19
  // format: /omnia/bundles/{manifestId}/{bundleType}
20
20
  let path = fullpath.split('?')[0];
21
21
  // format: {queryString}
@@ -12,14 +12,14 @@ function omniaPlugin(options) {
12
12
  'axios': 'axios/dist/axios.js',
13
13
  'broadcast-channel': 'broadcast-channel/dist/esbrowser/index.js',
14
14
  //'@vue/composition-api': '@vue/composition-api/dist/vue-composition-api.mjs',
15
- '@vue/babel-helper-vue-jsx-merge-props': '@vue/babel-helper-vue-jsx-merge-props/dist/helper.js',
16
- 'vue-tsx-support': 'vue-tsx-support/dist/esm/index.js',
17
- 'vue-tsx-support/lib/vca': 'vue-tsx-support/dist/esm/vca.js',
18
- 'vue-tsx-support/lib/api': 'vue-tsx-support/dist/esm/api.js',
15
+ // '@vue/babel-helper-vue-jsx-merge-props': '@vue/babel-helper-vue-jsx-merge-props/dist/helper.js',
16
+ // 'vue-tsx-support': 'vue-tsx-support/dist/esm/index.js',
17
+ // 'vue-tsx-support/lib/vca': 'vue-tsx-support/dist/esm/vca.js',
18
+ // 'vue-tsx-support/lib/api': 'vue-tsx-support/dist/esm/api.js',
19
19
  'csx': 'csx/lib.es2015/index.js',
20
- 'vue': 'vue/dist/vue.esm.js',
21
- 'vue-class-component': 'vue-class-component/dist/vue-class-component.esm.js',
22
- 'vue-property-decorator': 'vue-property-decorator/lib/vue-property-decorator.js',
20
+ 'vue': 'vue/dist/vue.esm-bundler.js',
21
+ // 'vue-class-component': 'vue-class-component/dist/vue-class-component.esm.js',
22
+ // 'vue-property-decorator': 'vue-property-decorator/lib/vue-property-decorator.js',
23
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',
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  function default_1(contents) {
4
- return "";
4
+ return "export default {};";
5
5
  //const index = contents.indexOf('export {};')
6
6
  //if (index > -1 && (contents.trim().length - 10) === index) {
7
7
  // console.log(this.resourcePath, this._compilation.getStats())
@@ -1,8 +1,19 @@
1
1
  export default function (treeshaking: any, wcDomProps: any, hotModuleReload?: any): {
2
2
  test: RegExp;
3
3
  exclude: RegExp;
4
- use: {
5
- loader: any;
6
- options: any;
7
- }[];
4
+ use: ({
5
+ loader: string;
6
+ options: {
7
+ cacheDirectory: boolean;
8
+ plugins: any[];
9
+ presets: string[][];
10
+ };
11
+ } | {
12
+ loader: string;
13
+ options: {
14
+ loader: string;
15
+ target: string;
16
+ jsx: string;
17
+ };
18
+ })[];
8
19
  }[];
@@ -17,11 +17,7 @@ function default_1(treeshaking, wcDomProps, hotModuleReload) {
17
17
  // '@vue/babel-preset-jsx',
18
18
  $.isExtensionEnv ?
19
19
  './node_modules/@omnia/tooling-vue/internal-do-not-import-from-here/babel/preset-jsx.js'
20
- : './client/tooling/vue/babel/preset-jsx.ts',
21
- {
22
- vModel: true,
23
- compositionAPI: true,
24
- },
20
+ : './client/tooling/vue/babel/preset-jsx.ts'
25
21
  ],
26
22
  ]
27
23
  };
@@ -55,10 +51,10 @@ function default_1(treeshaking, wcDomProps, hotModuleReload) {
55
51
  jsx: 'preserve'
56
52
  },
57
53
  },
58
- {
59
- loader: path.resolve(__dirname, $.isExtensionEnv ? './vue-domprops-loader.js' : './vue-domprops-loader.ts'),
60
- options: wcDomProps
61
- }
54
+ // {
55
+ // loader: path.resolve(__dirname, $.isExtensionEnv ? './vue-domprops-loader.js' : './vue-domprops-loader.ts'),
56
+ // options: wcDomProps
57
+ // }
62
58
  ];
63
59
  if (hotModuleReload) {
64
60
  loaders.push({
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@omnia/tooling-vue",
3
3
  "license": "MIT",
4
- "version": "7.0.533-dev",
4
+ "version": "8.0.1-vnext",
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,15 +19,15 @@
19
19
  ],
20
20
  "author": "Precio Fishbone",
21
21
  "dependencies": {
22
- "@omnia/fx-models": "7.0.533-dev",
23
- "@omnia/tooling-composers": "7.0.533-dev",
22
+ "@omnia/fx-models": "8.0.1-vnext",
23
+ "@omnia/tooling-composers": "8.0.1-vnext",
24
24
  "@types/mousetrap": "1.5.34",
25
- "@types/node": "10.11.7",
25
+ "@types/node": "18.13.0",
26
26
  "@types/quill": "1.3.6",
27
27
  "@types/zepto": "1.0.29",
28
28
  "@babel/core": "7.16.5",
29
29
  "babel-loader": "8.2.4",
30
- "@vue/babel-preset-jsx": "1.4.0",
30
+ "@vue/babel-plugin-jsx": "1.1.1",
31
31
  "circular-dependency-plugin": "5.2.2",
32
32
  "connect": "3.7.0",
33
33
  "console-timestamp": "0.3.0",
@@ -56,7 +56,7 @@
56
56
  "es6-promise": "4.2.4",
57
57
  "hash-sum": "1.0.2",
58
58
  "lodash": "4.17.21",
59
- "vite": "2.9.15",
59
+ "vite": "4.1.1",
60
60
  "appdata-path": "1.0.0"
61
61
  },
62
62
  "bugs": {