create-enchilada 1.0.0 → 1.0.2
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 +53 -1
- package/dist/index.js +70 -69
- package/index.js +0 -1
- package/package.json +12 -13
- package/templates/node-express/package.json +1 -2
- package/templates/react/src/App.css +5 -2
- package/templates/react/src/App.jsx +4 -4
- package/templates/react/src/index.css +12 -17
- package/templates/react-dev/index.html +1 -1
- package/templates/react-dev/src/App.jsx +3 -3
- package/templates/react-dev-typescript/index.html +1 -1
- package/templates/react-dev-typescript/src/App.tsx +3 -3
- package/templates/react-dev-webpack/index.html +1 -1
- package/templates/react-dev-webpack/src/App.jsx +3 -3
- package/templates/react-rspack/_gitignore +89 -0
- package/templates/react-rspack/biome.json +34 -0
- package/templates/react-rspack/index.html +11 -0
- package/templates/react-rspack/package.json +25 -0
- package/templates/react-rspack/rspack.config.mjs +70 -0
- package/templates/react-rspack/src/App.css +6 -0
- package/templates/react-rspack/src/App.jsx +19 -0
- package/templates/react-rspack/src/index.css +52 -0
- package/templates/react-rspack/src/main.jsx +10 -0
- package/templates/react-typescript/src/App.css +5 -2
- package/templates/react-typescript/src/App.tsx +4 -4
- package/templates/react-typescript/src/index.css +12 -17
- package/templates/react-webpack/src/App.css +5 -2
- package/templates/react-webpack/src/App.jsx +4 -4
- package/templates/react-webpack/src/index.css +12 -17
- package/templates/vanilla-js/index.html +1 -1
- package/templates/vanilla-js/index.js +1 -1
- package/templates/vanilla-js/style.css +8 -18
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-enchilada",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A quick way to start your web applications.",
|
|
6
6
|
"main": "index.js",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"lint": "eslint .",
|
|
9
9
|
"build": "rollup --config",
|
|
10
|
+
"dev": "rollup --config --watch",
|
|
10
11
|
"cov:clean": "rimraf .nyc_output && rimraf coverage",
|
|
11
12
|
"cov:unit": "NODE_OPTIONS=--experimental-vm-modules jest --forceExit --colors --detectOpenHandles -c jest.config.unit.js",
|
|
12
13
|
"test:unit": "npm-run-all cov:clean cov:unit",
|
|
@@ -55,21 +56,19 @@
|
|
|
55
56
|
},
|
|
56
57
|
"homepage": "https://github.com/Sharmaz/enchilada#readme",
|
|
57
58
|
"devDependencies": {
|
|
58
|
-
"@
|
|
59
|
-
"@
|
|
60
|
-
"@rollup/plugin-
|
|
59
|
+
"@eslint/js": "^9.29.0",
|
|
60
|
+
"@jest/globals": "^30.0.2",
|
|
61
|
+
"@rollup/plugin-commonjs": "^28.0.6",
|
|
62
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
61
63
|
"cli-prompts-test": "^0.3.0",
|
|
62
|
-
"eslint": "^
|
|
63
|
-
"eslint-config-airbnb-base": "^15.0.0",
|
|
64
|
-
"eslint-config-prettier": "^9.1.0",
|
|
65
|
-
"eslint-plugin-react": "^7.34.2",
|
|
66
|
-
"eslint-plugin-react-hooks": "^4.6.2",
|
|
67
|
-
"eslint-plugin-react-refresh": "^0.4.7",
|
|
64
|
+
"eslint": "^9.29.0",
|
|
68
65
|
"execa": "^9.2.0",
|
|
69
|
-
"
|
|
66
|
+
"globals": "^16.2.0",
|
|
67
|
+
"jest": "^30.0.2",
|
|
70
68
|
"npm-run-all": "^4.1.5",
|
|
71
|
-
"
|
|
72
|
-
"rollup
|
|
69
|
+
"rimraf": "^6.0.1",
|
|
70
|
+
"rollup": "^4.44.0",
|
|
71
|
+
"rollup-plugin-esbuild": "^6.2.1"
|
|
73
72
|
},
|
|
74
73
|
"dependencies": {
|
|
75
74
|
"chalk": "^5.3.0",
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
"name": "node-express",
|
|
3
3
|
"version": "1.0.0",
|
|
4
4
|
"main": "index.js",
|
|
5
|
-
"type": "module",
|
|
6
5
|
"scripts": {
|
|
7
6
|
"start": "node src/index.js",
|
|
8
|
-
"
|
|
7
|
+
"dev": "nodemon src/index.js",
|
|
9
8
|
"lint": "eslint .",
|
|
10
9
|
"cov:clean": "rimraf .nyc_output && rimraf coverage",
|
|
11
10
|
"cov:unit": "jest --forceExit --colors -c jest.config.unit.js",
|
|
@@ -5,14 +5,14 @@ function App() {
|
|
|
5
5
|
const [count, setCount] = useState(0)
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
|
-
|
|
9
|
-
<
|
|
8
|
+
<div className="container">
|
|
9
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
10
10
|
<div className="card">
|
|
11
11
|
<button onClick={() => setCount((count) => count + 1)}>
|
|
12
|
-
|
|
12
|
+
Enchiladas {count}
|
|
13
13
|
</button>
|
|
14
14
|
</div>
|
|
15
|
-
|
|
15
|
+
</div>
|
|
16
16
|
)
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
-
line-height:
|
|
3
|
+
line-height: 24px;
|
|
4
4
|
font-weight: 400;
|
|
5
5
|
|
|
6
6
|
color-scheme: light dark;
|
|
7
7
|
color: rgba(255, 255, 255, 0.87);
|
|
8
|
-
background-color: #
|
|
8
|
+
background-color: #262626;
|
|
9
9
|
|
|
10
10
|
font-synthesis: none;
|
|
11
11
|
text-rendering: optimizeLegibility;
|
|
@@ -28,30 +28,25 @@ h1 {
|
|
|
28
28
|
button {
|
|
29
29
|
border-radius: 8px;
|
|
30
30
|
border: 1px solid transparent;
|
|
31
|
-
padding:
|
|
31
|
+
padding: 8px 16px;
|
|
32
32
|
font-size: 1em;
|
|
33
|
-
font-weight:
|
|
33
|
+
font-weight: 400;
|
|
34
34
|
font-family: inherit;
|
|
35
|
-
background-color: #
|
|
35
|
+
background-color: #171717;
|
|
36
|
+
line-height: 24px;
|
|
36
37
|
cursor: pointer;
|
|
37
38
|
transition: border-color 0.25s;
|
|
39
|
+
width: 160px;
|
|
38
40
|
}
|
|
39
41
|
button:hover {
|
|
40
|
-
border-color: #
|
|
42
|
+
border-color: #FF9811;
|
|
41
43
|
}
|
|
42
44
|
button:focus,
|
|
43
45
|
button:focus-visible {
|
|
44
46
|
outline: 4px auto -webkit-focus-ring-color;
|
|
45
47
|
}
|
|
46
|
-
|
|
47
|
-
:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
a:hover {
|
|
52
|
-
color: #747bff;
|
|
53
|
-
}
|
|
54
|
-
button {
|
|
55
|
-
background-color: #f9f9f9;
|
|
56
|
-
}
|
|
48
|
+
.card {
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
padding: 2em;
|
|
57
52
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="#" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>React
|
|
7
|
+
<title>React Dev</title>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<div id="root"></div>
|
|
@@ -5,14 +5,14 @@ function App() {
|
|
|
5
5
|
|
|
6
6
|
return (
|
|
7
7
|
<div className="flex flex-col justify-center items-center h-screen bg-neutral-800">
|
|
8
|
-
<
|
|
8
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
9
9
|
<div className="p-8">
|
|
10
10
|
<button
|
|
11
|
-
className="bg-
|
|
11
|
+
className="bg-neutral-900 px-4 py-2 rounded-lg text-slate-200 w-[160px] border-1 border-transparent hover:border-[#FF9811] transition-colors duration-250 cursor-pointer"
|
|
12
12
|
onClick={() => setCount((counter) => counter + 1)}
|
|
13
13
|
type="button"
|
|
14
14
|
>
|
|
15
|
-
{`
|
|
15
|
+
{`Enchiladas ${count}`}
|
|
16
16
|
</button>
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="#" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>React TypeScript</title>
|
|
7
|
+
<title>React Dev TypeScript</title>
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<div id="root"></div>
|
|
@@ -4,14 +4,14 @@ function App() {
|
|
|
4
4
|
const [count, setCount] = useState(0)
|
|
5
5
|
return (
|
|
6
6
|
<div className="flex flex-col justify-center items-center h-screen bg-neutral-800">
|
|
7
|
-
<
|
|
7
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
8
8
|
<div className="p-8">
|
|
9
9
|
<button
|
|
10
|
-
className="bg-
|
|
10
|
+
className="bg-neutral-900 px-4 py-2 rounded-lg text-slate-200 w-[160px] border-1 border-transparent hover:border-[#FF9811] transition-colors duration-250 cursor-pointer"
|
|
11
11
|
onClick={() => setCount((counter) => counter + 1)}
|
|
12
12
|
type="button"
|
|
13
13
|
>
|
|
14
|
-
{`
|
|
14
|
+
{`Enchiladas ${count}`}
|
|
15
15
|
</button>
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
@@ -5,14 +5,14 @@ function App() {
|
|
|
5
5
|
|
|
6
6
|
return (
|
|
7
7
|
<div className="flex flex-col justify-center items-center h-screen bg-neutral-800">
|
|
8
|
-
<
|
|
8
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
9
9
|
<div className="p-8">
|
|
10
10
|
<button
|
|
11
|
-
className="bg-
|
|
11
|
+
className="bg-neutral-900 px-4 py-2 rounded-lg text-slate-200 w-[160px] border-1 border-transparent hover:border-[#FF9811] transition-colors duration-250 cursor-pointer"
|
|
12
12
|
onClick={() => setCount((counter) => counter + 1)}
|
|
13
13
|
type="button"
|
|
14
14
|
>
|
|
15
|
-
{`
|
|
15
|
+
{`Enchiladas ${count}`}
|
|
16
16
|
</button>
|
|
17
17
|
</div>
|
|
18
18
|
</div>
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# compiled output
|
|
2
|
+
/dist
|
|
3
|
+
/tmp
|
|
4
|
+
/out-tsc
|
|
5
|
+
|
|
6
|
+
# Runtime data
|
|
7
|
+
pids
|
|
8
|
+
*.pid
|
|
9
|
+
*.seed
|
|
10
|
+
*.pid.lock
|
|
11
|
+
|
|
12
|
+
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
13
|
+
lib-cov
|
|
14
|
+
|
|
15
|
+
# Coverage directory used by tools like istanbul
|
|
16
|
+
coverage
|
|
17
|
+
|
|
18
|
+
# nyc test coverage
|
|
19
|
+
.nyc_output
|
|
20
|
+
|
|
21
|
+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
|
22
|
+
.grunt
|
|
23
|
+
|
|
24
|
+
# Bower dependency directory (https://bower.io/)
|
|
25
|
+
bower_components
|
|
26
|
+
|
|
27
|
+
# node-waf configuration
|
|
28
|
+
.lock-wscript
|
|
29
|
+
|
|
30
|
+
# IDEs and editors
|
|
31
|
+
.idea
|
|
32
|
+
.project
|
|
33
|
+
.classpath
|
|
34
|
+
.c9/
|
|
35
|
+
*.launch
|
|
36
|
+
.settings/
|
|
37
|
+
*.sublime-workspace
|
|
38
|
+
|
|
39
|
+
# IDE - VSCode
|
|
40
|
+
.vscode/*
|
|
41
|
+
!.vscode/settings.json
|
|
42
|
+
!.vscode/tasks.json
|
|
43
|
+
!.vscode/launch.json
|
|
44
|
+
!.vscode/extensions.json
|
|
45
|
+
|
|
46
|
+
# misc
|
|
47
|
+
.sass-cache
|
|
48
|
+
connect.lock
|
|
49
|
+
typings
|
|
50
|
+
|
|
51
|
+
# Logs
|
|
52
|
+
logs
|
|
53
|
+
*.log
|
|
54
|
+
npm-debug.log*
|
|
55
|
+
yarn-debug.log*
|
|
56
|
+
yarn-error.log*
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
# Dependency directories
|
|
60
|
+
node_modules/
|
|
61
|
+
jspm_packages/
|
|
62
|
+
|
|
63
|
+
# Optional npm cache directory
|
|
64
|
+
.npm
|
|
65
|
+
|
|
66
|
+
# Optional eslint cache
|
|
67
|
+
.eslintcache
|
|
68
|
+
|
|
69
|
+
# Optional REPL history
|
|
70
|
+
.node_repl_history
|
|
71
|
+
|
|
72
|
+
# Output of 'npm pack'
|
|
73
|
+
*.tgz
|
|
74
|
+
|
|
75
|
+
# Yarn Integrity file
|
|
76
|
+
.yarn-integrity
|
|
77
|
+
|
|
78
|
+
# dotenv environment variables file
|
|
79
|
+
.env
|
|
80
|
+
|
|
81
|
+
# next.js build output
|
|
82
|
+
.next
|
|
83
|
+
|
|
84
|
+
# Lerna
|
|
85
|
+
lerna-debug.log
|
|
86
|
+
|
|
87
|
+
# System Files
|
|
88
|
+
.DS_Store
|
|
89
|
+
Thumbs.db
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
|
|
3
|
+
"assist": {
|
|
4
|
+
"actions": {
|
|
5
|
+
"source": {
|
|
6
|
+
"organizeImports": "on"
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
"vcs": {
|
|
11
|
+
"enabled": true,
|
|
12
|
+
"clientKind": "git",
|
|
13
|
+
"useIgnoreFile": true
|
|
14
|
+
},
|
|
15
|
+
"formatter": {
|
|
16
|
+
"indentStyle": "space"
|
|
17
|
+
},
|
|
18
|
+
"javascript": {
|
|
19
|
+
"formatter": {
|
|
20
|
+
"quoteStyle": "single"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"css": {
|
|
24
|
+
"parser": {
|
|
25
|
+
"cssModules": true
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"linter": {
|
|
29
|
+
"enabled": true,
|
|
30
|
+
"rules": {
|
|
31
|
+
"recommended": true
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-rspack",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build": "rspack build",
|
|
7
|
+
"check": "biome check --write",
|
|
8
|
+
"dev": "rspack dev",
|
|
9
|
+
"format": "biome format --write",
|
|
10
|
+
"preview": "rspack preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"react": "^19.1.0",
|
|
14
|
+
"react-dom": "^19.1.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@biomejs/biome": "2.0.0",
|
|
18
|
+
"@rspack/cli": "^1.4.1",
|
|
19
|
+
"@rspack/core": "^1.4.1",
|
|
20
|
+
"@rspack/plugin-react-refresh": "^1.4.3",
|
|
21
|
+
"@types/react": "^19.1.7",
|
|
22
|
+
"@types/react-dom": "^19.1.6",
|
|
23
|
+
"react-refresh": "^0.17.0"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { dirname } from "node:path";
|
|
2
|
+
import { fileURLToPath } from "node:url";
|
|
3
|
+
import { defineConfig } from "@rspack/cli";
|
|
4
|
+
import { rspack } from "@rspack/core";
|
|
5
|
+
import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
|
|
6
|
+
|
|
7
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
8
|
+
const isDev = process.env.NODE_ENV === "development";
|
|
9
|
+
|
|
10
|
+
// Target browsers, see: https://github.com/browserslist/browserslist
|
|
11
|
+
const targets = ["last 2 versions", "> 0.2%", "not dead", "Firefox ESR"];
|
|
12
|
+
|
|
13
|
+
export default defineConfig({
|
|
14
|
+
context: __dirname,
|
|
15
|
+
entry: {
|
|
16
|
+
main: "./src/main.jsx"
|
|
17
|
+
},
|
|
18
|
+
resolve: {
|
|
19
|
+
extensions: ["...", ".ts", ".tsx", ".jsx"]
|
|
20
|
+
},
|
|
21
|
+
module: {
|
|
22
|
+
rules: [
|
|
23
|
+
{
|
|
24
|
+
test: /\.svg$/,
|
|
25
|
+
type: "asset"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
test: /\.(jsx?|tsx?)$/,
|
|
29
|
+
use: [
|
|
30
|
+
{
|
|
31
|
+
loader: "builtin:swc-loader",
|
|
32
|
+
options: {
|
|
33
|
+
jsc: {
|
|
34
|
+
parser: {
|
|
35
|
+
syntax: "typescript",
|
|
36
|
+
tsx: true
|
|
37
|
+
},
|
|
38
|
+
transform: {
|
|
39
|
+
react: {
|
|
40
|
+
runtime: "automatic",
|
|
41
|
+
development: isDev,
|
|
42
|
+
refresh: isDev
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
env: { targets }
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
},
|
|
53
|
+
plugins: [
|
|
54
|
+
new rspack.HtmlRspackPlugin({
|
|
55
|
+
template: "./index.html"
|
|
56
|
+
}),
|
|
57
|
+
isDev ? new ReactRefreshRspackPlugin() : null
|
|
58
|
+
].filter(Boolean),
|
|
59
|
+
optimization: {
|
|
60
|
+
minimizer: [
|
|
61
|
+
new rspack.SwcJsMinimizerRspackPlugin(),
|
|
62
|
+
new rspack.LightningCssMinimizerRspackPlugin({
|
|
63
|
+
minimizerOptions: { targets }
|
|
64
|
+
})
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
experiments: {
|
|
68
|
+
css: true
|
|
69
|
+
}
|
|
70
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import './App.css'
|
|
3
|
+
|
|
4
|
+
function App() {
|
|
5
|
+
const [count, setCount] = useState(0)
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div className="container">
|
|
9
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
10
|
+
<div className="card">
|
|
11
|
+
<button onClick={() => setCount((count) => count + 1)}>
|
|
12
|
+
Enchiladas {count}
|
|
13
|
+
</button>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export default App
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
line-height: 24px;
|
|
4
|
+
font-weight: 400;
|
|
5
|
+
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
color: rgba(255, 255, 255, 0.87);
|
|
8
|
+
background-color: #262626;
|
|
9
|
+
|
|
10
|
+
font-synthesis: none;
|
|
11
|
+
text-rendering: optimizeLegibility;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
}
|
|
15
|
+
body {
|
|
16
|
+
margin: 0;
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
place-items: center;
|
|
20
|
+
min-width: 320px;
|
|
21
|
+
min-height: 100vh;
|
|
22
|
+
}
|
|
23
|
+
h1 {
|
|
24
|
+
font-size: 3.2em;
|
|
25
|
+
line-height: 1.1;
|
|
26
|
+
text-align: center;
|
|
27
|
+
}
|
|
28
|
+
button {
|
|
29
|
+
border-radius: 8px;
|
|
30
|
+
border: 1px solid transparent;
|
|
31
|
+
padding: 8px 16px;
|
|
32
|
+
font-size: 1em;
|
|
33
|
+
font-weight: 400;
|
|
34
|
+
font-family: inherit;
|
|
35
|
+
background-color: #171717;
|
|
36
|
+
line-height: 24px;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
transition: border-color 0.25s;
|
|
39
|
+
width: 160px;
|
|
40
|
+
}
|
|
41
|
+
button:hover {
|
|
42
|
+
border-color: #FF9811;
|
|
43
|
+
}
|
|
44
|
+
button:focus,
|
|
45
|
+
button:focus-visible {
|
|
46
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
47
|
+
}
|
|
48
|
+
.card {
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
padding: 2em;
|
|
52
|
+
}
|
|
@@ -4,14 +4,14 @@ import './App.css'
|
|
|
4
4
|
function App() {
|
|
5
5
|
const [count, setCount] = useState(0)
|
|
6
6
|
return (
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
<div className="container">
|
|
8
|
+
<img src="https://raw.githubusercontent.com/Sharmaz/enchilada/refs/heads/main/media/enchilada-js-logo.svg" width="250" alt="enchiladajs logo"/>
|
|
9
9
|
<div className="card">
|
|
10
10
|
<button onClick={() => setCount((count) => count + 1)}>
|
|
11
|
-
|
|
11
|
+
Enchiladas {count}
|
|
12
12
|
</button>
|
|
13
13
|
</div>
|
|
14
|
-
|
|
14
|
+
</div>
|
|
15
15
|
)
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
-
line-height:
|
|
3
|
+
line-height: 24px;
|
|
4
4
|
font-weight: 400;
|
|
5
5
|
|
|
6
6
|
color-scheme: light dark;
|
|
7
7
|
color: rgba(255, 255, 255, 0.87);
|
|
8
|
-
background-color: #
|
|
8
|
+
background-color: #262626;
|
|
9
9
|
|
|
10
10
|
font-synthesis: none;
|
|
11
11
|
text-rendering: optimizeLegibility;
|
|
@@ -28,30 +28,25 @@ h1 {
|
|
|
28
28
|
button {
|
|
29
29
|
border-radius: 8px;
|
|
30
30
|
border: 1px solid transparent;
|
|
31
|
-
padding:
|
|
31
|
+
padding: 8px 16px;
|
|
32
32
|
font-size: 1em;
|
|
33
|
-
font-weight:
|
|
33
|
+
font-weight: 400;
|
|
34
34
|
font-family: inherit;
|
|
35
|
-
background-color: #
|
|
35
|
+
background-color: #171717;
|
|
36
|
+
line-height: 24px;
|
|
36
37
|
cursor: pointer;
|
|
37
38
|
transition: border-color 0.25s;
|
|
39
|
+
width: 160px;
|
|
38
40
|
}
|
|
39
41
|
button:hover {
|
|
40
|
-
border-color: #
|
|
42
|
+
border-color: #FF9811;
|
|
41
43
|
}
|
|
42
44
|
button:focus,
|
|
43
45
|
button:focus-visible {
|
|
44
46
|
outline: 4px auto -webkit-focus-ring-color;
|
|
45
47
|
}
|
|
46
|
-
|
|
47
|
-
:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
a:hover {
|
|
52
|
-
color: #747bff;
|
|
53
|
-
}
|
|
54
|
-
button {
|
|
55
|
-
background-color: #f9f9f9;
|
|
56
|
-
}
|
|
48
|
+
.card {
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
padding: 2em;
|
|
57
52
|
}
|