create-rspack-canary 1.7.0-canary-08772c3f-20251224173339 → 1.7.0-canary-0da65999-20251226173527

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 (37) hide show
  1. package/bin.js +1 -1
  2. package/dist/index.js +29 -29
  3. package/package.json +2 -2
  4. package/template-react-js/index.html +8 -8
  5. package/template-react-js/rspack.config.mjs +64 -64
  6. package/template-react-js/src/App.css +20 -20
  7. package/template-react-js/src/App.jsx +25 -25
  8. package/template-react-js/src/index.css +44 -44
  9. package/template-react-js/src/main.jsx +8 -8
  10. package/template-react-ts/index.html +9 -9
  11. package/template-react-ts/rspack.config.ts +60 -60
  12. package/template-react-ts/src/App.css +20 -20
  13. package/template-react-ts/src/App.tsx +25 -25
  14. package/template-react-ts/src/index.css +44 -44
  15. package/template-react-ts/src/main.tsx +8 -8
  16. package/template-react-ts/src/react-env.d.ts +162 -162
  17. package/template-vanilla-js/index.html +8 -8
  18. package/template-vanilla-js/rspack.config.mjs +43 -43
  19. package/template-vanilla-js/src/index.css +15 -15
  20. package/template-vanilla-js/src/index.js +2 -2
  21. package/template-vanilla-ts/index.html +8 -8
  22. package/template-vanilla-ts/rspack.config.ts +61 -61
  23. package/template-vanilla-ts/src/index.css +15 -15
  24. package/template-vanilla-ts/src/index.ts +2 -2
  25. package/template-vue-js/index.html +8 -8
  26. package/template-vue-js/rspack.config.mjs +63 -63
  27. package/template-vue-js/src/App.vue +18 -18
  28. package/template-vue-js/src/components/HelloWorld.vue +20 -20
  29. package/template-vue-js/src/main.js +4 -4
  30. package/template-vue-js/src/style.css +53 -53
  31. package/template-vue-ts/index.html +8 -8
  32. package/template-vue-ts/rspack.config.ts +65 -65
  33. package/template-vue-ts/src/App.vue +18 -18
  34. package/template-vue-ts/src/components/HelloWorld.vue +20 -20
  35. package/template-vue-ts/src/main.ts +4 -4
  36. package/template-vue-ts/src/shims-vue.d.ts +4 -4
  37. package/template-vue-ts/src/style.css +53 -53
package/bin.js CHANGED
@@ -1,2 +1,2 @@
1
1
  #!/usr/bin/env node
2
- import "./dist/index.js";
2
+ import './dist/index.js';
package/dist/index.js CHANGED
@@ -3,39 +3,39 @@ import { fileURLToPath } from "node:url";
3
3
  import { checkCancel, create, select as external_create_rstack_select } from "create-rstack";
4
4
  const src_dirname = node_path.dirname(fileURLToPath(import.meta.url));
5
5
  async function getTemplateName({ template }) {
6
- if ("string" == typeof template) {
7
- const pair = template.split("-");
8
- const language = pair[1] ?? "js";
6
+ if ('string' == typeof template) {
7
+ const pair = template.split('-');
8
+ const language = pair[1] ?? 'js';
9
9
  const framework = pair[0];
10
10
  return `${framework}-${language}`;
11
11
  }
12
12
  const framework = checkCancel(await external_create_rstack_select({
13
- message: "Select framework",
13
+ message: 'Select framework',
14
14
  options: [
15
15
  {
16
- value: "vanilla",
17
- label: "Vanilla"
16
+ value: 'vanilla',
17
+ label: 'Vanilla'
18
18
  },
19
19
  {
20
- value: "react",
21
- label: "React"
20
+ value: 'react',
21
+ label: 'React'
22
22
  },
23
23
  {
24
- value: "vue",
25
- label: "Vue"
24
+ value: 'vue',
25
+ label: 'Vue'
26
26
  }
27
27
  ]
28
28
  }));
29
29
  const language = checkCancel(await external_create_rstack_select({
30
- message: "Select language",
30
+ message: 'Select language',
31
31
  options: [
32
32
  {
33
- value: "ts",
34
- label: "TypeScript"
33
+ value: 'ts',
34
+ label: 'TypeScript'
35
35
  },
36
36
  {
37
- value: "js",
38
- label: "JavaScript"
37
+ value: 'js',
38
+ label: 'JavaScript'
39
39
  }
40
40
  ]
41
41
  }));
@@ -43,28 +43,28 @@ async function getTemplateName({ template }) {
43
43
  }
44
44
  function mapESLintTemplate(templateName) {
45
45
  switch(templateName){
46
- case "react-js":
47
- case "react-ts":
48
- case "vue-js":
49
- case "vue-ts":
46
+ case 'react-js':
47
+ case 'react-ts':
48
+ case 'vue-js':
49
+ case 'vue-ts':
50
50
  return templateName;
51
51
  }
52
- const language = templateName.split("-")[1];
52
+ const language = templateName.split('-')[1];
53
53
  return `vanilla-${language}`;
54
54
  }
55
55
  create({
56
- root: node_path.resolve(src_dirname, ".."),
57
- name: "rspack",
56
+ root: node_path.resolve(src_dirname, '..'),
57
+ name: 'rspack',
58
58
  templates: [
59
- "vanilla-js",
60
- "vanilla-ts",
61
- "react-js",
62
- "react-ts",
63
- "vue-js",
64
- "vue-ts"
59
+ 'vanilla-js',
60
+ 'vanilla-ts',
61
+ 'react-js',
62
+ 'react-ts',
63
+ 'vue-js',
64
+ 'vue-ts'
65
65
  ],
66
66
  skipFiles: [
67
- ".npmignore"
67
+ '.npmignore'
68
68
  ],
69
69
  getTemplateName,
70
70
  mapESLintTemplate
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-rspack-canary",
3
- "version": "1.7.0-canary-08772c3f-20251224173339",
3
+ "version": "1.7.0-canary-0da65999-20251226173527",
4
4
  "homepage": "https://rspack.rs",
5
5
  "bugs": "https://github.com/web-infra-dev/rspack/issues",
6
6
  "repository": {
@@ -23,7 +23,7 @@
23
23
  "create-rstack": "1.7.20"
24
24
  },
25
25
  "devDependencies": {
26
- "@rslib/core": "0.18.5",
26
+ "@rslib/core": "0.18.6",
27
27
  "typescript": "^5.9.3"
28
28
  },
29
29
  "publishConfig": {
package/template-react-js/index.html CHANGED
@@ -1,11 +1,11 @@
1
1
  <!doctype html>
2
2
  <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Rspack + React</title>
7
- </head>
8
- <body>
9
- <div id="root"></div>
10
- </body>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Rspack + React</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ </body>
11
11
  </html>
package/template-react-js/rspack.config.mjs CHANGED
@@ -1,72 +1,72 @@
1
1
  // @ts-check
2
- import { dirname } from "node:path";
3
- import { fileURLToPath } from "node:url";
4
- import { defineConfig } from "@rspack/cli";
5
- import { rspack } from "@rspack/core";
6
- import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
2
+ import { dirname } from 'node:path';
3
+ import { fileURLToPath } from 'node:url';
4
+ import { defineConfig } from '@rspack/cli';
5
+ import { rspack } from '@rspack/core';
6
+ import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
7
7
 
8
8
  const __dirname = dirname(fileURLToPath(import.meta.url));
9
- const isDev = process.env.NODE_ENV === "development";
9
+ const isDev = process.env.NODE_ENV === 'development';
10
10
 
11
11
  // Target browsers, see: https://github.com/browserslist/browserslist
12
- const targets = ["last 2 versions", "> 0.2%", "not dead", "Firefox ESR"];
12
+ const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
13
13
 
14
14
  export default defineConfig({
15
- context: __dirname,
16
- entry: {
17
- main: "./src/main.jsx"
18
- },
19
- resolve: {
20
- extensions: ["...", ".ts", ".tsx", ".jsx"]
21
- },
22
- module: {
23
- rules: [
24
- {
25
- test: /\.svg$/,
26
- type: "asset"
27
- },
28
- {
29
- test: /\.(jsx?|tsx?)$/,
30
- use: [
31
- {
32
- loader: "builtin:swc-loader",
33
- /** @type {import('@rspack/core').SwcLoaderOptions} */
34
- options: {
35
- jsc: {
36
- parser: {
37
- syntax: "typescript",
38
- tsx: true
39
- },
40
- transform: {
41
- react: {
42
- runtime: "automatic",
43
- development: isDev,
44
- refresh: isDev
45
- }
46
- }
47
- },
48
- env: { targets }
49
- }
50
- }
51
- ]
52
- }
53
- ]
54
- },
55
- plugins: [
56
- new rspack.HtmlRspackPlugin({
57
- template: "./index.html"
58
- }),
59
- isDev ? new ReactRefreshRspackPlugin() : null
60
- ],
61
- optimization: {
62
- minimizer: [
63
- new rspack.SwcJsMinimizerRspackPlugin(),
64
- new rspack.LightningCssMinimizerRspackPlugin({
65
- minimizerOptions: { targets }
66
- })
67
- ]
68
- },
69
- experiments: {
70
- css: true
71
- }
15
+ context: __dirname,
16
+ entry: {
17
+ main: './src/main.jsx',
18
+ },
19
+ resolve: {
20
+ extensions: ['...', '.ts', '.tsx', '.jsx'],
21
+ },
22
+ module: {
23
+ rules: [
24
+ {
25
+ test: /\.svg$/,
26
+ type: 'asset',
27
+ },
28
+ {
29
+ test: /\.(jsx?|tsx?)$/,
30
+ use: [
31
+ {
32
+ loader: 'builtin:swc-loader',
33
+ /** @type {import('@rspack/core').SwcLoaderOptions} */
34
+ options: {
35
+ jsc: {
36
+ parser: {
37
+ syntax: 'typescript',
38
+ tsx: true,
39
+ },
40
+ transform: {
41
+ react: {
42
+ runtime: 'automatic',
43
+ development: isDev,
44
+ refresh: isDev,
45
+ },
46
+ },
47
+ },
48
+ env: { targets },
49
+ },
50
+ },
51
+ ],
52
+ },
53
+ ],
54
+ },
55
+ plugins: [
56
+ new rspack.HtmlRspackPlugin({
57
+ template: './index.html',
58
+ }),
59
+ isDev ? new ReactRefreshRspackPlugin() : null,
60
+ ],
61
+ optimization: {
62
+ minimizer: [
63
+ new rspack.SwcJsMinimizerRspackPlugin(),
64
+ new rspack.LightningCssMinimizerRspackPlugin({
65
+ minimizerOptions: { targets },
66
+ }),
67
+ ],
68
+ },
69
+ experiments: {
70
+ css: true,
71
+ },
72
72
  });
package/template-react-js/src/App.css CHANGED
@@ -1,41 +1,41 @@
1
1
  #root {
2
- max-width: 1280px;
3
- margin: 0 auto;
4
- padding: 2rem;
5
- text-align: center;
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
6
  }
7
7
 
8
8
  .logo {
9
- height: 6em;
10
- padding: 1.5em;
11
- will-change: filter;
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ will-change: filter;
12
12
  }
13
13
  .logo:hover {
14
- filter: drop-shadow(0 0 2em #646cffaa);
14
+ filter: drop-shadow(0 0 2em #646cffaa);
15
15
  }
16
16
  .logo.react:hover {
17
- filter: drop-shadow(0 0 2em #61dafbaa);
17
+ filter: drop-shadow(0 0 2em #61dafbaa);
18
18
  }
19
19
 
20
20
  @keyframes logo-spin {
21
- from {
22
- transform: rotate(0deg);
23
- }
24
- to {
25
- transform: rotate(360deg);
26
- }
21
+ from {
22
+ transform: rotate(0deg);
23
+ }
24
+ to {
25
+ transform: rotate(360deg);
26
+ }
27
27
  }
28
28
 
29
29
  @media (prefers-reduced-motion: no-preference) {
30
- a > .logo {
31
- animation: logo-spin infinite 20s linear;
32
- }
30
+ a > .logo {
31
+ animation: logo-spin infinite 20s linear;
32
+ }
33
33
  }
34
34
 
35
35
  .card {
36
- padding: 2em;
36
+ padding: 2em;
37
37
  }
38
38
 
39
39
  .read-the-docs {
40
- color: #888;
40
+ color: #888;
41
41
  }
package/template-react-js/src/App.jsx CHANGED
@@ -1,31 +1,31 @@
1
- import { useState } from "react";
2
- import reactLogo from "./assets/react.svg";
3
- import "./App.css";
1
+ import { useState } from 'react';
2
+ import reactLogo from './assets/react.svg';
3
+ import './App.css';
4
4
 
5
5
  function App() {
6
- const [count, setCount] = useState(0);
6
+ const [count, setCount] = useState(0);
7
7
 
8
- return (
9
- <div className="App">
10
- <div>
11
- <a href="https://reactjs.org" target="_blank" rel="noreferrer">
12
- <img src={reactLogo} className="logo react" alt="React logo" />
13
- </a>
14
- </div>
15
- <h1>Rspack + React</h1>
16
- <div className="card">
17
- <button type="button" onClick={() => setCount(count => count + 1)}>
18
- count is {count}
19
- </button>
20
- <p>
21
- Edit <code>src/App.jsx</code> and save to test HMR
22
- </p>
23
- </div>
24
- <p className="read-the-docs">
25
- Click on the Rspack and React logos to learn more
26
- </p>
27
- </div>
28
- );
8
+ return (
9
+ <div className="App">
10
+ <div>
11
+ <a href="https://reactjs.org" target="_blank" rel="noreferrer">
12
+ <img src={reactLogo} className="logo react" alt="React logo" />
13
+ </a>
14
+ </div>
15
+ <h1>Rspack + React</h1>
16
+ <div className="card">
17
+ <button type="button" onClick={() => setCount((count) => count + 1)}>
18
+ count is {count}
19
+ </button>
20
+ <p>
21
+ Edit <code>src/App.jsx</code> and save to test HMR
22
+ </p>
23
+ </div>
24
+ <p className="read-the-docs">
25
+ Click on the Rspack and React logos to learn more
26
+ </p>
27
+ </div>
28
+ );
29
29
  }
30
30
 
31
31
  export default App;
package/template-react-js/src/index.css CHANGED
@@ -1,70 +1,70 @@
1
1
  :root {
2
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3
- font-size: 16px;
4
- line-height: 24px;
5
- font-weight: 400;
2
+ font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3
+ font-size: 16px;
4
+ line-height: 24px;
5
+ font-weight: 400;
6
6
 
7
- color-scheme: light dark;
8
- color: rgba(255, 255, 255, 0.87);
9
- background-color: #242424;
7
+ color-scheme: light dark;
8
+ color: rgba(255, 255, 255, 0.87);
9
+ background-color: #242424;
10
10
 
11
- font-synthesis: none;
12
- text-rendering: optimizeLegibility;
13
- -webkit-font-smoothing: antialiased;
14
- -moz-osx-font-smoothing: grayscale;
15
- -webkit-text-size-adjust: 100%;
11
+ font-synthesis: none;
12
+ text-rendering: optimizeLegibility;
13
+ -webkit-font-smoothing: antialiased;
14
+ -moz-osx-font-smoothing: grayscale;
15
+ -webkit-text-size-adjust: 100%;
16
16
  }
17
17
 
18
18
  a {
19
- font-weight: 500;
20
- color: #646cff;
21
- text-decoration: inherit;
19
+ font-weight: 500;
20
+ color: #646cff;
21
+ text-decoration: inherit;
22
22
  }
23
23
  a:hover {
24
- color: #535bf2;
24
+ color: #535bf2;
25
25
  }
26
26
 
27
27
  body {
28
- margin: 0;
29
- display: flex;
30
- place-items: center;
31
- min-width: 320px;
32
- min-height: 100vh;
28
+ margin: 0;
29
+ display: flex;
30
+ place-items: center;
31
+ min-width: 320px;
32
+ min-height: 100vh;
33
33
  }
34
34
 
35
35
  h1 {
36
- font-size: 3.2em;
37
- line-height: 1.1;
36
+ font-size: 3.2em;
37
+ line-height: 1.1;
38
38
  }
39
39
 
40
40
  button {
41
- border-radius: 8px;
42
- border: 1px solid transparent;
43
- padding: 0.6em 1.2em;
44
- font-size: 1em;
45
- font-weight: 500;
46
- font-family: inherit;
47
- background-color: #1a1a1a;
48
- cursor: pointer;
49
- transition: border-color 0.25s;
41
+ border-radius: 8px;
42
+ border: 1px solid transparent;
43
+ padding: 0.6em 1.2em;
44
+ font-size: 1em;
45
+ font-weight: 500;
46
+ font-family: inherit;
47
+ background-color: #1a1a1a;
48
+ cursor: pointer;
49
+ transition: border-color 0.25s;
50
50
  }
51
51
  button:hover {
52
- border-color: #646cff;
52
+ border-color: #646cff;
53
53
  }
54
54
  button:focus,
55
55
  button:focus-visible {
56
- outline: 4px auto -webkit-focus-ring-color;
56
+ outline: 4px auto -webkit-focus-ring-color;
57
57
  }
58
58
 
59
59
  @media (prefers-color-scheme: light) {
60
- :root {
61
- color: #213547;
62
- background-color: #ffffff;
63
- }
64
- a:hover {
65
- color: #747bff;
66
- }
67
- button {
68
- background-color: #f9f9f9;
69
- }
60
+ :root {
61
+ color: #213547;
62
+ background-color: #ffffff;
63
+ }
64
+ a:hover {
65
+ color: #747bff;
66
+ }
67
+ button {
68
+ background-color: #f9f9f9;
69
+ }
70
70
  }
package/template-react-js/src/main.jsx CHANGED
@@ -1,10 +1,10 @@
1
- import React from "react";
2
- import ReactDOM from "react-dom/client";
3
- import App from "./App";
4
- import "./index.css";
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import App from './App';
4
+ import './index.css';
5
5
 
6
- ReactDOM.createRoot(document.getElementById("root")).render(
7
- <React.StrictMode>
8
- <App />
9
- </React.StrictMode>
6
+ ReactDOM.createRoot(document.getElementById('root')).render(
7
+ <React.StrictMode>
8
+ <App />
9
+ </React.StrictMode>,
10
10
  );
package/template-react-ts/index.html CHANGED
@@ -1,12 +1,12 @@
1
1
  <!doctype html>
2
2
  <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/react.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Rspack + React + TS</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
- </body>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/react.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Rspack + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ </body>
12
12
  </html>