@unpackjs/plugin-react 1.5.4 → 1.6.1

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 (13) hide show
  1. package/dist/click-to-component/index.cjs +28 -16
  2. package/dist/click-to-component/index.d.ts +3 -3
  3. package/dist/click-to-component/index.d.ts.map +1 -1
  4. package/dist/click-to-component/index.js +31 -15
  5. package/dist/index.cjs +12 -11
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/index.js +9 -8
  9. package/dist/mpa.cjs +14 -23
  10. package/dist/mpa.d.ts +1 -1
  11. package/dist/mpa.d.ts.map +1 -1
  12. package/dist/mpa.js +9 -17
  13. package/package.json +4 -4
package/dist/click-to-component/index.cjs CHANGED
@@ -33,9 +33,9 @@ module.exports = __toCommonJS(click_to_component_exports);
33
33
  var import_node_fs = __toESM(require("node:fs"));
34
34
  var import_node_http = __toESM(require("node:http"));
35
35
  var import_node_path = __toESM(require("node:path"));
36
- var import_shared = require("@unpackjs/shared");
36
+ var import_core = require("@unpackjs/core");
37
37
  var import_launch_editor = __toESM(require("launch-editor"));
38
- function createServer() {
38
+ const createServer = () => {
39
39
  return new Promise((resolve) => {
40
40
  const server = import_node_http.default.createServer((req, res) => {
41
41
  const params = new URLSearchParams(req.url.slice(1));
@@ -51,7 +51,7 @@ function createServer() {
51
51
  res.end("ok");
52
52
  (0, import_launch_editor.default)(`${file}:${line}:${column}`);
53
53
  });
54
- (0, import_shared.getPort)(3100).then((port) => {
54
+ (0, import_core.getPort)(3100).then((port) => {
55
55
  server.listen(port, () => {
56
56
  resolve({
57
57
  port
@@ -59,30 +59,42 @@ function createServer() {
59
59
  });
60
60
  });
61
61
  });
62
- }
62
+ };
63
63
  const addClickToComponentSupport = async ({
64
64
  config,
65
- bundler
65
+ unpackConfig
66
66
  }) => {
67
- if (!(0, import_shared.isDev)())
68
- return config;
69
67
  const { port } = await createServer();
70
68
  const injectScript = import_node_fs.default.readFileSync(import_node_path.default.resolve(__dirname, "./injectScript.js"), "utf-8");
71
- config.plugins.push(
72
- new bundler.BannerPlugin({
73
- banner: `
69
+ const scriptTpl = `
74
70
  if (!document.querySelector('#__click-to-component__')) {
75
71
  const script = document.createElement('script')
76
72
  window['CLICK_TO_COMPONENT'] = { port: ${port} }
77
73
  script.setAttribute('type', 'text/javascript')
78
74
  script.textContent = \`${injectScript}\`
79
75
  document.body.appendChild(script)
80
- }`,
81
- entryOnly: true,
82
- raw: true,
83
- exclude: /\.css$/
84
- })
85
- );
76
+ }`;
77
+ if (unpackConfig.mpa) {
78
+ Object.values(config.entry).forEach((entryConfig) => {
79
+ const filePath = entryConfig.import[0];
80
+ const content = import_node_fs.default.readFileSync(filePath, "utf-8");
81
+ import_node_fs.default.writeFileSync(filePath, `${scriptTpl}
82
+ ${content}`, "utf-8");
83
+ });
84
+ } else {
85
+ const realEntryPath = import_node_path.default.resolve(config.context, import_core.TEMP_DIR, "entry.jsx");
86
+ const tpl = `
87
+ ${scriptTpl}
88
+ import '${(0, import_core.getPathInJs)(import_node_path.default.resolve(Object.values(config.entry)[0]))}'
89
+ `;
90
+ const dir = import_node_path.default.dirname(realEntryPath);
91
+ if (!import_node_fs.default.existsSync(dir))
92
+ import_node_fs.default.mkdirSync(dir, { recursive: true });
93
+ import_node_fs.default.writeFileSync(realEntryPath, tpl, "utf-8");
94
+ config.entry = {
95
+ main: realEntryPath
96
+ };
97
+ }
86
98
  return config;
87
99
  };
88
100
  // Annotate the CommonJS export names for ESM import in node:
package/dist/click-to-component/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { type BundlerConfiguration } from '@unpackjs/shared';
2
- export declare const addClickToComponentSupport: ({ config, bundler, }: {
1
+ import { type BundlerConfiguration, type UnpackConfig } from '@unpackjs/core';
2
+ export declare const addClickToComponentSupport: ({ config, unpackConfig, }: {
3
3
  config: BundlerConfiguration;
4
- bundler: any;
4
+ unpackConfig: UnpackConfig;
5
5
  }) => Promise<BundlerConfiguration>;
6
6
  //# sourceMappingURL=index.d.ts.map
package/dist/click-to-component/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,oBAAoB,EAAkB,MAAM,kBAAkB,CAAA;AA4B5E,eAAO,MAAM,0BAA0B,yBAGpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,OAAO,MAAA;CACR,KAAG,OAAO,CAAC,oBAAoB,CAoB/B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/click-to-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EAGlB,MAAM,gBAAgB,CAAA;AA4BvB,eAAO,MAAM,0BAA0B,8BAGpC;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;CAC3B,KAAG,OAAO,CAAC,oBAAoB,CA+B/B,CAAA"}
package/dist/click-to-component/index.js CHANGED
@@ -10,9 +10,13 @@ var __filename = /* @__PURE__ */ getFilename();
10
10
  import fs from "node:fs";
11
11
  import http from "node:http";
12
12
  import path2 from "node:path";
13
- import { getPort, isDev } from "@unpackjs/shared";
13
+ import {
14
+ TEMP_DIR,
15
+ getPathInJs,
16
+ getPort
17
+ } from "@unpackjs/core";
14
18
  import launchEditor from "launch-editor";
15
- function createServer() {
19
+ const createServer = () => {
16
20
  return new Promise((resolve) => {
17
21
  const server = http.createServer((req, res) => {
18
22
  const params = new URLSearchParams(req.url.slice(1));
@@ -36,30 +40,42 @@ function createServer() {
36
40
  });
37
41
  });
38
42
  });
39
- }
43
+ };
40
44
  const addClickToComponentSupport = async ({
41
45
  config,
42
- bundler
46
+ unpackConfig
43
47
  }) => {
44
- if (!isDev())
45
- return config;
46
48
  const { port } = await createServer();
47
49
  const injectScript = fs.readFileSync(path2.resolve(__dirname, "./injectScript.js"), "utf-8");
48
- config.plugins.push(
49
- new bundler.BannerPlugin({
50
- banner: `
50
+ const scriptTpl = `
51
51
  if (!document.querySelector('#__click-to-component__')) {
52
52
  const script = document.createElement('script')
53
53
  window['CLICK_TO_COMPONENT'] = { port: ${port} }
54
54
  script.setAttribute('type', 'text/javascript')
55
55
  script.textContent = \`${injectScript}\`
56
56
  document.body.appendChild(script)
57
- }`,
58
- entryOnly: true,
59
- raw: true,
60
- exclude: /\.css$/
61
- })
62
- );
57
+ }`;
58
+ if (unpackConfig.mpa) {
59
+ Object.values(config.entry).forEach((entryConfig) => {
60
+ const filePath = entryConfig.import[0];
61
+ const content = fs.readFileSync(filePath, "utf-8");
62
+ fs.writeFileSync(filePath, `${scriptTpl}
63
+ ${content}`, "utf-8");
64
+ });
65
+ } else {
66
+ const realEntryPath = path2.resolve(config.context, TEMP_DIR, "entry.jsx");
67
+ const tpl = `
68
+ ${scriptTpl}
69
+ import '${getPathInJs(path2.resolve(Object.values(config.entry)[0]))}'
70
+ `;
71
+ const dir = path2.dirname(realEntryPath);
72
+ if (!fs.existsSync(dir))
73
+ fs.mkdirSync(dir, { recursive: true });
74
+ fs.writeFileSync(realEntryPath, tpl, "utf-8");
75
+ config.entry = {
76
+ main: realEntryPath
77
+ };
78
+ }
63
79
  return config;
64
80
  };
65
81
  export {
package/dist/index.cjs CHANGED
@@ -34,22 +34,23 @@ module.exports = __toCommonJS(src_exports);
34
34
  var import_node_path = __toESM(require("node:path"));
35
35
  var import_react_refresh_webpack_plugin = __toESM(require("@pmmmwh/react-refresh-webpack-plugin"));
36
36
  var import_plugin_react_refresh = __toESM(require("@rspack/plugin-react-refresh"));
37
- var import_shared = require("@unpackjs/shared");
37
+ var import_core = require("@unpackjs/core");
38
38
  var import_click_to_component = require("./click-to-component/index.cjs");
39
39
  var import_mpa = require("./mpa.cjs");
40
40
  const PLUGIN_NAME = "unpack:react";
41
41
  const pluginReact = (options = {}) => {
42
42
  return {
43
43
  name: PLUGIN_NAME,
44
- bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, bundler }) => {
44
+ bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig }) => {
45
45
  let config = originalConfig;
46
- if (options.clickToComponent) {
47
- config = await (0, import_click_to_component.addClickToComponentSupport)({ config, bundler });
48
- }
49
46
  config = (0, import_mpa.addMpaSupport)({ config, unpackConfig, mergeConfig });
47
+ if ((0, import_core.isDev)() && options.clickToComponent) {
48
+ config = await (0, import_click_to_component.addClickToComponentSupport)({ config, unpackConfig });
49
+ }
50
+ const isRspack = unpackConfig.bundler === "rspack";
50
51
  const jsExclude = [/node_modules[\\/](?!\.unpack)/];
51
- const swcLoader = unpackConfig.bundler === "rspack" ? "builtin:swc-loader" : require.resolve("swc-loader");
52
- const ReactRefreshPlugin = unpackConfig.bundler === "rspack" ? import_plugin_react_refresh.default : import_react_refresh_webpack_plugin.default;
52
+ const swcLoader = isRspack ? "builtin:swc-loader" : require.resolve("swc-loader");
53
+ const ReactRefreshPlugin = isRspack ? import_plugin_react_refresh.default : import_react_refresh_webpack_plugin.default;
53
54
  const getSwcOptions = ({ tsx }) => {
54
55
  return {
55
56
  jsc: {
@@ -63,12 +64,12 @@ const pluginReact = (options = {}) => {
63
64
  transform: {
64
65
  react: {
65
66
  runtime: "automatic",
66
- refresh: (0, import_shared.isDevServer)()
67
+ refresh: (0, import_core.isDevServer)()
67
68
  }
68
69
  }
69
70
  },
70
71
  env: {
71
- targets: import_shared.DEFAULT_BROWSERSLIST
72
+ targets: import_core.DEFAULT_BROWSERSLIST
72
73
  }
73
74
  };
74
75
  };
@@ -90,10 +91,10 @@ const pluginReact = (options = {}) => {
90
91
  ]
91
92
  },
92
93
  plugins: [
93
- (0, import_shared.isDevServer)() && new ReactRefreshPlugin({
94
+ (0, import_core.isDevServer)() && new ReactRefreshPlugin({
94
95
  overlay: false
95
96
  })
96
- ],
97
+ ].filter(Boolean),
97
98
  resolve: {
98
99
  alias: {
99
100
  "@swc/helpers": import_node_path.default.dirname(require.resolve("@swc/helpers/package.json"))
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type UnpackPlugin } from '@unpackjs/shared';
1
+ import { type UnpackPlugin } from '@unpackjs/core';
2
2
  export declare const PLUGIN_NAME = "unpack:react";
3
3
  export type PluginReactOptions = {
4
4
  clickToComponent?: boolean;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwB,KAAK,YAAY,EAAe,MAAM,kBAAkB,CAAA;AAIvF,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAmE9D,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAwB,KAAK,YAAY,EAAsB,MAAM,gBAAgB,CAAA;AAI5F,eAAO,MAAM,WAAW,iBAAiB,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,YAkE9D,CAAA"}
package/dist/index.js CHANGED
@@ -10,22 +10,23 @@ var __filename = /* @__PURE__ */ getFilename();
10
10
  import path2 from "node:path";
11
11
  import WebpackReactRefreshPlugin from "@pmmmwh/react-refresh-webpack-plugin";
12
12
  import RspackReactRefreshPlugin from "@rspack/plugin-react-refresh";
13
- import { DEFAULT_BROWSERSLIST, isDevServer } from "@unpackjs/shared";
13
+ import { DEFAULT_BROWSERSLIST, isDev, isDevServer } from "@unpackjs/core";
14
14
  import { addClickToComponentSupport } from "./click-to-component/index.js";
15
15
  import { addMpaSupport } from "./mpa.js";
16
16
  const PLUGIN_NAME = "unpack:react";
17
17
  const pluginReact = (options = {}) => {
18
18
  return {
19
19
  name: PLUGIN_NAME,
20
- bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig, bundler }) => {
20
+ bundlerConfig: async (originalConfig, { unpackConfig, mergeConfig }) => {
21
21
  let config = originalConfig;
22
- if (options.clickToComponent) {
23
- config = await addClickToComponentSupport({ config, bundler });
24
- }
25
22
  config = addMpaSupport({ config, unpackConfig, mergeConfig });
23
+ if (isDev() && options.clickToComponent) {
24
+ config = await addClickToComponentSupport({ config, unpackConfig });
25
+ }
26
+ const isRspack = unpackConfig.bundler === "rspack";
26
27
  const jsExclude = [/node_modules[\\/](?!\.unpack)/];
27
- const swcLoader = unpackConfig.bundler === "rspack" ? "builtin:swc-loader" : require.resolve("swc-loader");
28
- const ReactRefreshPlugin = unpackConfig.bundler === "rspack" ? RspackReactRefreshPlugin : WebpackReactRefreshPlugin;
28
+ const swcLoader = isRspack ? "builtin:swc-loader" : require.resolve("swc-loader");
29
+ const ReactRefreshPlugin = isRspack ? RspackReactRefreshPlugin : WebpackReactRefreshPlugin;
29
30
  const getSwcOptions = ({ tsx }) => {
30
31
  return {
31
32
  jsc: {
@@ -69,7 +70,7 @@ const pluginReact = (options = {}) => {
69
70
  isDevServer() && new ReactRefreshPlugin({
70
71
  overlay: false
71
72
  })
72
- ],
73
+ ].filter(Boolean),
73
74
  resolve: {
74
75
  alias: {
75
76
  "@swc/helpers": path2.dirname(require.resolve("@swc/helpers/package.json"))
package/dist/mpa.cjs CHANGED
@@ -32,7 +32,7 @@ __export(mpa_exports, {
32
32
  module.exports = __toCommonJS(mpa_exports);
33
33
  var import_node_fs = __toESM(require("node:fs"));
34
34
  var import_node_path = __toESM(require("node:path"));
35
- var import_shared = require("@unpackjs/shared");
35
+ var import_core = require("@unpackjs/core");
36
36
  var import_html_webpack_plugin = __toESM(require("html-webpack-plugin"));
37
37
  const addMpaSupport = ({
38
38
  config,
@@ -41,8 +41,8 @@ const addMpaSupport = ({
41
41
  }) => {
42
42
  if (!unpackConfig.mpa)
43
43
  return config;
44
- const tempDirectory = import_node_path.default.join(import_shared.TEMP_DIR, "mpa");
45
- const userOptions = (0, import_shared.isPlainObject)(unpackConfig.mpa) ? unpackConfig.mpa : {};
44
+ const tempDirectory = import_node_path.default.join(import_core.TEMP_DIR, "mpa");
45
+ const userOptions = (0, import_core.isPlainObject)(unpackConfig.mpa) ? unpackConfig.mpa : {};
46
46
  const getPageConfig = (indexPath) => {
47
47
  const filePath = import_node_path.default.join(indexPath, "../config.json");
48
48
  let pageConfig = {};
@@ -51,37 +51,28 @@ const addMpaSupport = ({
51
51
  }
52
52
  return pageConfig;
53
53
  };
54
- const getPathInJs = (absPath) => {
55
- return JSON.stringify(absPath).slice(1, -1);
56
- };
57
- const getAbsPathForEntry = (_path) => {
58
- const absPath = import_node_path.default.join(unpackConfig.root, _path);
59
- const validPath = import_node_fs.default.existsSync(absPath) ? absPath : _path;
60
- return getPathInJs(validPath);
61
- };
62
54
  const createTempFile = (entry2) => {
63
55
  import_node_fs.default.rmSync(import_node_path.default.join(unpackConfig.root, tempDirectory), { recursive: true, force: true });
64
56
  const globalImport = userOptions.globalImport?.reduce((acc, curr) => {
65
57
  return `${acc}
66
- import '${getAbsPathForEntry(curr)}';`.trimStart();
58
+ import '${(0, import_core.getPathInJs)(import_node_path.default.resolve(unpackConfig.root, curr))}'`;
67
59
  }, "") || "";
68
60
  const { layout } = userOptions;
69
- const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(layout)}';` : "";
61
+ const layoutImport = layout ? `import Layout from '${(0, import_core.getPathInJs)(import_node_path.default.resolve(unpackConfig.root, layout))}'` : "";
70
62
  const layoutJSX = layout ? "<Layout><App /></Layout>" : "<App />";
71
63
  const rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`;
72
64
  const reactDOMSource = "react-dom/client";
73
- const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX});`;
65
+ const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
74
66
  Object.entries(entry2).forEach(([entryName, entryConfig]) => {
75
67
  const filePath = import_node_path.default.join(unpackConfig.root, tempDirectory, `${entryName}.jsx`);
76
68
  const tpl = `
77
- // DO NOT CHANGE IT MANUALLY!
78
- import React from 'react';
79
- import ReactDOM from '${reactDOMSource}';
80
- import App from '${getPathInJs(entryConfig.import[0])}';${layoutImport && `
69
+ import React from 'react'
70
+ import ReactDOM from '${reactDOMSource}'
71
+ import App from '${(0, import_core.getPathInJs)(entryConfig.import[0])}'${layoutImport && `
81
72
  ${layoutImport}`}
82
73
  ${globalImport}
83
74
  ${renderer}
84
- `.trimStart();
75
+ `;
85
76
  const dir = import_node_path.default.dirname(filePath);
86
77
  if (!import_node_fs.default.existsSync(dir)) {
87
78
  import_node_fs.default.mkdirSync(dir, { recursive: true });
@@ -124,14 +115,14 @@ ${renderer}
124
115
  }
125
116
  html2.push({
126
117
  template: unpackConfig.html?.template || "",
127
- templateContent: unpackConfig.html?.templateContent || import_shared.TEMPLATE_CONTENT,
118
+ templateContent: unpackConfig.html?.templateContent || import_core.TEMPLATE_CONTENT,
128
119
  minify: false,
129
120
  filename: `${entryName}.html`,
130
121
  chunks: [entryName],
131
122
  ...pageConfig,
132
123
  templateParameters: {
133
124
  mountId: unpackConfig.html?.mountId,
134
- title: (0, import_shared.isFunction)(unpackConfig.html?.title) ? unpackConfig.html?.title({ entryName }) : unpackConfig.html?.title,
125
+ title: (0, import_core.isFunction)(unpackConfig.html?.title) ? unpackConfig.html?.title({ entryName }) : unpackConfig.html?.title,
135
126
  headTag: unpackConfig.html?.headTag,
136
127
  ...unpackConfig.html?.templateParameters,
137
128
  ...pageConfig.templateParameters
@@ -139,8 +130,8 @@ ${renderer}
139
130
  });
140
131
  }
141
132
  });
142
- !(0, import_shared.isDevServer)() && import_shared.logger.info(
143
- `Collect entries in ${(performance.now() - start).toFixed(2)}ms ${import_shared.colors.dim("[MPA]")}`
133
+ !(0, import_core.isDevServer)() && import_core.logger.info(
134
+ `Collect entries in ${(performance.now() - start).toFixed(2)}ms ${import_core.colors.dim("[MPA]")}`
144
135
  );
145
136
  return { entry: entry2, html: html2 };
146
137
  };
package/dist/mpa.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type BundlerConfiguration, type UnpackConfig } from '@unpackjs/shared';
1
+ import { type BundlerConfiguration, type UnpackConfig } from '@unpackjs/core';
2
2
  export declare const addMpaSupport: ({ config, unpackConfig, mergeConfig, }: {
3
3
  config: BundlerConfiguration;
4
4
  unpackConfig: UnpackConfig;
package/dist/mpa.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAMlB,MAAM,kBAAkB,CAAA;AAazB,eAAO,MAAM,aAAa,2CAIvB;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,CAAC,GAAG,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,CAAA;CAC1E,KAAG,oBAoHH,CAAA"}
1
+ {"version":3,"file":"mpa.d.ts","sourceRoot":"","sources":["../src/mpa.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,oBAAoB,EAGzB,KAAK,YAAY,EAOlB,MAAM,gBAAgB,CAAA;AAavB,eAAO,MAAM,aAAa,2CAIvB;IACD,MAAM,EAAE,oBAAoB,CAAA;IAC5B,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,CAAC,GAAG,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,CAAA;CAC1E,KAAG,oBAyGH,CAAA"}
package/dist/mpa.js CHANGED
@@ -13,11 +13,12 @@ import {
13
13
  TEMPLATE_CONTENT,
14
14
  TEMP_DIR,
15
15
  colors,
16
+ getPathInJs,
16
17
  isDevServer,
17
18
  isFunction,
18
19
  isPlainObject,
19
20
  logger
20
- } from "@unpackjs/shared";
21
+ } from "@unpackjs/core";
21
22
  import HtmlWebpackPlugin from "html-webpack-plugin";
22
23
  const addMpaSupport = ({
23
24
  config,
@@ -36,37 +37,28 @@ const addMpaSupport = ({
36
37
  }
37
38
  return pageConfig;
38
39
  };
39
- const getPathInJs = (absPath) => {
40
- return JSON.stringify(absPath).slice(1, -1);
41
- };
42
- const getAbsPathForEntry = (_path) => {
43
- const absPath = path2.join(unpackConfig.root, _path);
44
- const validPath = fs.existsSync(absPath) ? absPath : _path;
45
- return getPathInJs(validPath);
46
- };
47
40
  const createTempFile = (entry2) => {
48
41
  fs.rmSync(path2.join(unpackConfig.root, tempDirectory), { recursive: true, force: true });
49
42
  const globalImport = userOptions.globalImport?.reduce((acc, curr) => {
50
43
  return `${acc}
51
- import '${getAbsPathForEntry(curr)}';`.trimStart();
44
+ import '${getPathInJs(path2.resolve(unpackConfig.root, curr))}'`;
52
45
  }, "") || "";
53
46
  const { layout } = userOptions;
54
- const layoutImport = layout ? `import Layout from '${getAbsPathForEntry(layout)}';` : "";
47
+ const layoutImport = layout ? `import Layout from '${getPathInJs(path2.resolve(unpackConfig.root, layout))}'` : "";
55
48
  const layoutJSX = layout ? "<Layout><App /></Layout>" : "<App />";
56
49
  const rootElement = `document.getElementById('${unpackConfig.html?.mountId}')`;
57
50
  const reactDOMSource = "react-dom/client";
58
- const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX});`;
51
+ const renderer = `ReactDOM.createRoot(${rootElement}).render(${layoutJSX})`;
59
52
  Object.entries(entry2).forEach(([entryName, entryConfig]) => {
60
53
  const filePath = path2.join(unpackConfig.root, tempDirectory, `${entryName}.jsx`);
61
54
  const tpl = `
62
- // DO NOT CHANGE IT MANUALLY!
63
- import React from 'react';
64
- import ReactDOM from '${reactDOMSource}';
65
- import App from '${getPathInJs(entryConfig.import[0])}';${layoutImport && `
55
+ import React from 'react'
56
+ import ReactDOM from '${reactDOMSource}'
57
+ import App from '${getPathInJs(entryConfig.import[0])}'${layoutImport && `
66
58
  ${layoutImport}`}
67
59
  ${globalImport}
68
60
  ${renderer}
69
- `.trimStart();
61
+ `;
70
62
  const dir = path2.dirname(filePath);
71
63
  if (!fs.existsSync(dir)) {
72
64
  fs.mkdirSync(dir, { recursive: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unpackjs/plugin-react",
3
- "version": "1.5.4",
3
+ "version": "1.6.1",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "exports": {
@@ -27,11 +27,11 @@
27
27
  "@rspack/plugin-react-refresh": "1.0.0",
28
28
  "react-refresh": "0.14.2",
29
29
  "swc-loader": "0.2.6",
30
- "@swc/core": "1.7.36",
30
+ "@swc/core": "1.7.39",
31
31
  "@swc/helpers": "0.5.13",
32
32
  "launch-editor": "2.9.1",
33
- "html-webpack-plugin": "5.6.2",
34
- "@unpackjs/shared": "^1.5.4"
33
+ "html-webpack-plugin": "5.6.3",
34
+ "@unpackjs/core": "^1.6.1"
35
35
  },
36
36
  "scripts": {
37
37
  "dev": "modern build --watch",