react-client 1.0.38 → 1.0.41

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 (47) hide show
  1. package/README.md +115 -124
  2. package/dist/cli/commands/build.js +19 -3
  3. package/dist/cli/commands/build.js.map +1 -1
  4. package/dist/cli/commands/dev.js +373 -102
  5. package/dist/cli/commands/dev.js.map +1 -1
  6. package/dist/cli/commands/init.js +72 -7
  7. package/dist/cli/commands/init.js.map +1 -1
  8. package/dist/cli/commands/preview.js +9 -15
  9. package/dist/cli/commands/preview.js.map +1 -1
  10. package/dist/cli/index.js +1 -0
  11. package/dist/cli/index.js.map +1 -1
  12. package/dist/index.d.ts +2 -0
  13. package/dist/index.js +3 -0
  14. package/dist/index.js.map +1 -0
  15. package/dist/utils/loadConfig.js +31 -22
  16. package/dist/utils/loadConfig.js.map +1 -1
  17. package/package.json +3 -2
  18. package/templates/react/public/favicon.ico +0 -0
  19. package/templates/react/public/index.html +14 -0
  20. package/templates/react/public/logo512.png +0 -0
  21. package/templates/react/src/App.css +42 -0
  22. package/templates/react/src/App.jsx +23 -1
  23. package/templates/react/src/index.css +68 -0
  24. package/templates/react-tailwind/public/favicon.ico +0 -0
  25. package/templates/react-tailwind/public/index.html +14 -0
  26. package/templates/react-tailwind/public/logo512.png +0 -0
  27. package/templates/react-tailwind/src/App.css +42 -0
  28. package/templates/react-tailwind/src/App.jsx +31 -2
  29. package/templates/react-tailwind/src/index.css +68 -1
  30. package/templates/react-tailwind/src/main.jsx +1 -3
  31. package/templates/react-tailwind-ts/public/favicon.ico +0 -0
  32. package/templates/react-tailwind-ts/public/index.html +14 -0
  33. package/templates/react-tailwind-ts/public/logo512.png +0 -0
  34. package/templates/react-tailwind-ts/src/App.css +42 -0
  35. package/templates/react-tailwind-ts/src/App.tsx +30 -2
  36. package/templates/react-tailwind-ts/src/index.css +68 -1
  37. package/templates/react-tailwind-ts/src/main.tsx +0 -1
  38. package/templates/react-ts/public/favicon.ico +0 -0
  39. package/templates/react-ts/public/index.html +14 -0
  40. package/templates/react-ts/public/logo512.png +0 -0
  41. package/templates/react-ts/src/App.css +42 -0
  42. package/templates/react-ts/src/App.tsx +23 -1
  43. package/templates/react-ts/src/index.css +68 -0
  44. package/templates/react/index.html +0 -13
  45. package/templates/react-tailwind/index.html +0 -13
  46. package/templates/react-tailwind-ts/index.html +0 -13
  47. package/templates/react-ts/index.html +0 -13
package/templates/react/src/index.css ADDED
@@ -0,0 +1,68 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ @media (prefers-color-scheme: light) {
58
+ :root {
59
+ color: #213547;
60
+ background-color: #ffffff;
61
+ }
62
+ a:hover {
63
+ color: #747bff;
64
+ }
65
+ button {
66
+ background-color: #f9f9f9;
67
+ }
68
+ }
package/templates/react-tailwind/public/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>React Client</title>
7
+ <link rel="icon" type="image/x-icon" href="/favicon.ico?v=1" />
8
+ <link rel="shortcut icon" href="/favicon.ico?v=1" />
9
+ </head>
10
+ <body>
11
+ <div id="root"></div>
12
+ <script type="module" src="/src/main.jsx"></script>
13
+ </body>
14
+ </html>
package/templates/react-tailwind/src/App.css ADDED
@@ -0,0 +1,42 @@
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5rem;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
package/templates/react-tailwind/src/App.jsx CHANGED
@@ -1,3 +1,32 @@
1
- export default function App() {
2
- return <div className='p-8'><h1 className='text-2xl'>Tailwind</h1><p>Welcome to react-tailwind template.</p></div>;
1
+ import './App.css';
2
+
3
+ export default function App() {
4
+
5
+ return (
6
+ <div className="min-h-screen bg-[#242424] text-white flex flex-col items-center justify-center p-8 text-center font-sans">
7
+ <div className="mb-8">
8
+ <a href="https://react.dev" target="_blank" rel="noreferrer">
9
+ <img
10
+ src="/logo512.png"
11
+ className="h-32 p-4 transition-filter duration-300 hover:drop-shadow-[0_0_2em_#61dafbaa] animate-[spin_20s_linear_infinite]"
12
+ alt="React logo"
13
+ />
14
+ </a>
15
+ </div>
16
+
17
+ <h1 className="text-5xl font-bold leading-tight mb-8">
18
+ React + Tailwind + React Client
19
+ </h1>
20
+
21
+ <div className="bg-[#1a1a1a] p-8 rounded-xl mb-8">
22
+ <p className="mt-4 text-[#888]">
23
+ Edit <code className="text-white">src/App.jsx</code> and save to test HMR
24
+ </p>
25
+ </div>
26
+
27
+ <p className="text-[#888]">
28
+ Click on the React logo to learn more
29
+ </p>
30
+ </div>
31
+ );
3
32
  }
package/templates/react-tailwind/src/index.css CHANGED
@@ -1 +1,68 @@
1
- @tailwind base;@tailwind components;@tailwind utilities;
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ @media (prefers-color-scheme: light) {
58
+ :root {
59
+ color: #213547;
60
+ background-color: #ffffff;
61
+ }
62
+ a:hover {
63
+ color: #747bff;
64
+ }
65
+ button {
66
+ background-color: #f9f9f9;
67
+ }
68
+ }
package/templates/react-tailwind/src/main.jsx CHANGED
@@ -1,9 +1,7 @@
1
-
2
- import '/@react-refresh-shim';
3
1
  import React from 'react';
4
2
  import { createRoot } from 'react-dom/client';
5
3
  import App from './App';
6
4
  import './index.css';
7
5
 
8
6
  const root = createRoot(document.getElementById('root'));
9
- root.render(<App/>);
7
+ root.render(<App />);
package/templates/react-tailwind-ts/public/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>React Client</title>
7
+ <link rel="icon" type="image/x-icon" href="/favicon.ico?v=1" />
8
+ <link rel="shortcut icon" href="/favicon.ico?v=1" />
9
+ </head>
10
+ <body>
11
+ <div id="root"></div>
12
+ <script type="module" src="/src/main.tsx"></script>
13
+ </body>
14
+ </html>
package/templates/react-tailwind-ts/src/App.css ADDED
@@ -0,0 +1,42 @@
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5rem;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
package/templates/react-tailwind-ts/src/App.tsx CHANGED
@@ -1,4 +1,32 @@
1
+ import './App.css';
1
2
 
2
- export default function App() {
3
- return <div className='p-8'><h1 className='text-2xl font-bold'>Tailwind TS</h1><p>Welcome to react-tailwind-ts template.</p></div>;
3
+ export default function App() {
4
+
5
+ return (
6
+ <div className="min-h-screen bg-[#242424] text-white flex flex-col items-center justify-center p-8 text-center font-sans tracking-wide">
7
+ <div className="mb-8">
8
+ <a href="https://react.dev" target="_blank" rel="noreferrer">
9
+ <img
10
+ src="/logo512.png"
11
+ className="h-32 p-4 transition-all duration-300 hover:drop-shadow-[0_0_2em_#61dafbaa] animate-[spin_20s_linear_infinite]"
12
+ alt="React logo"
13
+ />
14
+ </a>
15
+ </div>
16
+
17
+ <h1 className="text-5xl font-extrabold leading-tight mb-8">
18
+ React + Tailwind + Typescript + React Client
19
+ </h1>
20
+
21
+ <div className="bg-[#1a1a1a] p-8 rounded-2xl mb-8 border border-[#2e2e2e]">
22
+ <p className="mt-4 text-[#888] font-medium">
23
+ Edit <code className="text-white bg-[#000] px-1 rounded">src/App.tsx</code> and save to test HMR
24
+ </p>
25
+ </div>
26
+
27
+ <p className="text-[#888] italic">
28
+ Click on the React logo to learn more
29
+ </p>
30
+ </div>
31
+ );
4
32
  }
package/templates/react-tailwind-ts/src/index.css CHANGED
@@ -1 +1,68 @@
1
- @tailwind base;@tailwind components;@tailwind utilities;
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ @media (prefers-color-scheme: light) {
58
+ :root {
59
+ color: #213547;
60
+ background-color: #ffffff;
61
+ }
62
+ a:hover {
63
+ color: #747bff;
64
+ }
65
+ button {
66
+ background-color: #f9f9f9;
67
+ }
68
+ }
package/templates/react-tailwind-ts/src/main.tsx CHANGED
@@ -1,5 +1,4 @@
1
1
 
2
- import '/@react-refresh-shim';
3
2
  import React from 'react';
4
3
  import { createRoot } from 'react-dom/client';
5
4
  import App from './App';
package/templates/react-ts/public/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>React Client</title>
7
+ <link rel="icon" type="image/x-icon" href="/favicon.ico?v=1" />
8
+ <link rel="shortcut icon" href="/favicon.ico?v=1" />
9
+ </head>
10
+ <body>
11
+ <div id="root"></div>
12
+ <script type="module" src="/src/main.tsx"></script>
13
+ </body>
14
+ </html>
package/templates/react-ts/src/App.css ADDED
@@ -0,0 +1,42 @@
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5rem;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
package/templates/react-ts/src/App.tsx CHANGED
@@ -1 +1,23 @@
1
- export default function App(){ return <div>Hello React TS</div>; }
1
+ import './App.css';
2
+
3
+ export default function App() {
4
+
5
+ return (
6
+ <>
7
+ <div>
8
+ <a href="https://react.dev" target="_blank" rel="noreferrer">
9
+ <img src="/logo512.png" className="logo react" alt="React logo" />
10
+ </a>
11
+ </div>
12
+ <h1>React + Typescript + React Client</h1>
13
+ <div className="card">
14
+ <p>
15
+ Edit <code>src/App.tsx</code> and save to test HMR
16
+ </p>
17
+ </div>
18
+ <p className="read-the-docs">
19
+ Click on the React logo to learn more
20
+ </p>
21
+ </>
22
+ );
23
+ }
package/templates/react-ts/src/index.css ADDED
@@ -0,0 +1,68 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ button {
39
+ border-radius: 8px;
40
+ border: 1px solid transparent;
41
+ padding: 0.6em 1.2em;
42
+ font-size: 1em;
43
+ font-weight: 500;
44
+ font-family: inherit;
45
+ background-color: #1a1a1a;
46
+ cursor: pointer;
47
+ transition: border-color 0.25s;
48
+ }
49
+ button:hover {
50
+ border-color: #646cff;
51
+ }
52
+ button:focus,
53
+ button:focus-visible {
54
+ outline: 4px auto -webkit-focus-ring-color;
55
+ }
56
+
57
+ @media (prefers-color-scheme: light) {
58
+ :root {
59
+ color: #213547;
60
+ background-color: #ffffff;
61
+ }
62
+ a:hover {
63
+ color: #747bff;
64
+ }
65
+ button {
66
+ background-color: #f9f9f9;
67
+ }
68
+ }
package/templates/react/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>React Client App</title>
7
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
8
- </head>
9
- <body>
10
- <div id='root'></div>
11
- <script type="module" src="/src/main.jsx"></script>
12
- </body>
13
- </html>
package/templates/react-tailwind/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>React Client App</title>
7
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
8
- </head>
9
- <body>
10
- <div id='root'></div>
11
- <script type="module" src="/src/main.jsx"></script>
12
- </body>
13
- </html>
package/templates/react-tailwind-ts/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>React Client App</title>
7
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
8
- </head>
9
- <body>
10
- <div id='root'></div>
11
- <script type="module" src="/src/main.tsx"></script>
12
- </body>
13
- </html>
package/templates/react-ts/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>React Client App</title>
7
- <link rel="icon" type="image/x-icon" href="/favicon.ico" />
8
- </head>
9
- <body>
10
- <div id='root'></div>
11
- <script type="module" src="/src/main.tsx"></script>
12
- </body>
13
- </html>