create-reactivite 1.2.0 → 1.4.0
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.
- package/README.md +95 -3
- package/index.js +175 -30
- package/package.json +6 -4
- package/template/src/App.tsx +7 -2
- package/template/src/components/author-credit.tsx +25 -0
- package/template2/app/[locale]/layout.tsx +2 -0
- package/template2/components/author-credit.tsx +25 -0
- package/template2/tsconfig.tsbuildinfo +1 -1
- package/template3/README.md +34 -0
- package/template3/_gitignore +16 -0
- package/template3/index.html +11 -0
- package/template3/package.json +22 -0
- package/template3/rspack.config.mjs +51 -0
- package/template3/src/App.tsx +16 -0
- package/template3/src/components/author-credit.tsx +42 -0
- package/template3/src/index.css +46 -0
- package/template3/src/main.tsx +10 -0
- package/template3/tsconfig.json +20 -0
- package/template2/pnpm-lock.yaml +0 -6804
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# Rspack Simple Starter
|
|
2
|
+
|
|
3
|
+
A minimal **React + TypeScript** template bundled with [Rspack](https://rspack.dev/) — a fast Rust-based bundler. Intentionally bare; grow it as you need.
|
|
4
|
+
|
|
5
|
+
## Scripts
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm dev # dev server on http://localhost:5174
|
|
9
|
+
pnpm build # production build → dist/
|
|
10
|
+
pnpm preview # serve the production build
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Structure
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
├── index.html
|
|
17
|
+
├── rspack.config.mjs # entry, swc loader, html plugin, dev server
|
|
18
|
+
├── tsconfig.json
|
|
19
|
+
└── src/
|
|
20
|
+
├── main.tsx # React root
|
|
21
|
+
├── App.tsx
|
|
22
|
+
├── index.css
|
|
23
|
+
└── components/
|
|
24
|
+
└── author-credit.tsx
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
TypeScript/TSX is transpiled by Rspack's built-in SWC loader (no Babel). CSS uses Rspack's native CSS support (`type: "css"`).
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
Built by **Javid Salimov** ·
|
|
32
|
+
[GitHub](https://github.com/javidselimov) ·
|
|
33
|
+
[LinkedIn](https://www.linkedin.com/in/javidsalim/) ·
|
|
34
|
+
[npm](https://www.npmjs.com/~ubuligan)
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rspack-simple",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.1.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "rspack serve",
|
|
8
|
+
"build": "rspack build",
|
|
9
|
+
"preview": "rspack serve --mode production"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"react": "^19.2.0",
|
|
13
|
+
"react-dom": "^19.2.0"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@rspack/cli": "^1.5.0",
|
|
17
|
+
"@rspack/core": "^1.5.0",
|
|
18
|
+
"@types/react": "^19",
|
|
19
|
+
"@types/react-dom": "^19",
|
|
20
|
+
"typescript": "^5.9.3"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { defineConfig } from '@rspack/cli';
|
|
2
|
+
import { rspack } from '@rspack/core';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
entry: {
|
|
6
|
+
main: './src/main.tsx',
|
|
7
|
+
},
|
|
8
|
+
resolve: {
|
|
9
|
+
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
|
10
|
+
},
|
|
11
|
+
module: {
|
|
12
|
+
rules: [
|
|
13
|
+
{
|
|
14
|
+
test: /\.css$/,
|
|
15
|
+
type: 'css',
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
test: /\.(jsx?|tsx?)$/,
|
|
19
|
+
use: {
|
|
20
|
+
loader: 'builtin:swc-loader',
|
|
21
|
+
options: {
|
|
22
|
+
jsc: {
|
|
23
|
+
parser: {
|
|
24
|
+
syntax: 'typescript',
|
|
25
|
+
tsx: true,
|
|
26
|
+
},
|
|
27
|
+
transform: {
|
|
28
|
+
react: {
|
|
29
|
+
runtime: 'automatic',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
type: 'javascript/auto',
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
plugins: [
|
|
40
|
+
new rspack.HtmlRspackPlugin({
|
|
41
|
+
template: './index.html',
|
|
42
|
+
}),
|
|
43
|
+
],
|
|
44
|
+
experiments: {
|
|
45
|
+
css: true,
|
|
46
|
+
},
|
|
47
|
+
devServer: {
|
|
48
|
+
port: 5174,
|
|
49
|
+
historyApiFallback: true,
|
|
50
|
+
},
|
|
51
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { AuthorCredit } from './components/author-credit';
|
|
2
|
+
|
|
3
|
+
export default function App() {
|
|
4
|
+
return (
|
|
5
|
+
<>
|
|
6
|
+
<div className="app">
|
|
7
|
+
<div>
|
|
8
|
+
<span className="badge">Rspack + React + TypeScript</span>
|
|
9
|
+
<h1>Rspack Simple Starter</h1>
|
|
10
|
+
<p>Minimal template — extend it however you like.</p>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
<AuthorCredit />
|
|
14
|
+
</>
|
|
15
|
+
);
|
|
16
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
const links = [
|
|
2
|
+
{ label: 'GitHub', href: 'https://github.com/javidselimov' },
|
|
3
|
+
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/javidsalim/' },
|
|
4
|
+
{ label: 'npm', href: 'https://www.npmjs.com/~ubuligan' },
|
|
5
|
+
];
|
|
6
|
+
|
|
7
|
+
export function AuthorCredit() {
|
|
8
|
+
return (
|
|
9
|
+
<div
|
|
10
|
+
style={{
|
|
11
|
+
position: 'fixed',
|
|
12
|
+
bottom: 16,
|
|
13
|
+
right: 16,
|
|
14
|
+
zIndex: 50,
|
|
15
|
+
display: 'flex',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
gap: 12,
|
|
18
|
+
padding: '8px 16px',
|
|
19
|
+
borderRadius: 9999,
|
|
20
|
+
border: '1px solid #2a2f3a',
|
|
21
|
+
background: 'rgba(13, 16, 22, 0.8)',
|
|
22
|
+
backdropFilter: 'blur(8px)',
|
|
23
|
+
fontSize: 13,
|
|
24
|
+
color: '#e7eaf0',
|
|
25
|
+
}}
|
|
26
|
+
>
|
|
27
|
+
<strong>Javid Salimov</strong>
|
|
28
|
+
<span style={{ color: '#3a3f4a' }}>·</span>
|
|
29
|
+
{links.map((l) => (
|
|
30
|
+
<a
|
|
31
|
+
key={l.label}
|
|
32
|
+
href={l.href}
|
|
33
|
+
target="_blank"
|
|
34
|
+
rel="noreferrer"
|
|
35
|
+
style={{ color: '#8b93a7', textDecoration: 'none' }}
|
|
36
|
+
>
|
|
37
|
+
{l.label}
|
|
38
|
+
</a>
|
|
39
|
+
))}
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #0b0d12;
|
|
3
|
+
--fg: #e7eaf0;
|
|
4
|
+
--muted: #8b93a7;
|
|
5
|
+
--accent: #6aa9ff;
|
|
6
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
* {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
body {
|
|
14
|
+
margin: 0;
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
background: radial-gradient(circle at 30% 20%, #161a23, var(--bg));
|
|
17
|
+
color: var(--fg);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.app {
|
|
21
|
+
min-height: 100vh;
|
|
22
|
+
display: grid;
|
|
23
|
+
place-items: center;
|
|
24
|
+
text-align: center;
|
|
25
|
+
padding: 24px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.app h1 {
|
|
29
|
+
font-size: 2.5rem;
|
|
30
|
+
margin: 0 0 0.5rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.app p {
|
|
34
|
+
color: var(--muted);
|
|
35
|
+
margin: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.badge {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
margin-bottom: 1rem;
|
|
41
|
+
padding: 4px 12px;
|
|
42
|
+
border: 1px solid #2a2f3a;
|
|
43
|
+
border-radius: 9999px;
|
|
44
|
+
font-size: 0.8rem;
|
|
45
|
+
color: var(--accent);
|
|
46
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"allowImportingTsExtensions": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"noEmit": true,
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"strict": true,
|
|
15
|
+
"noUnusedLocals": true,
|
|
16
|
+
"noUnusedParameters": true,
|
|
17
|
+
"noFallthroughCasesInSwitch": true
|
|
18
|
+
},
|
|
19
|
+
"include": ["src"]
|
|
20
|
+
}
|