mez-easyjs 0.1.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/LICENSE +21 -0
- package/README.md +40 -0
- package/bin/create-easy-app.js +60 -0
- package/bin/easy.js +7 -0
- package/compiler.d.ts +37 -0
- package/package.json +74 -0
- package/runtime.d.ts +103 -0
- package/src/commands/build.js +284 -0
- package/src/commands/create.js +476 -0
- package/src/commands/dev.js +434 -0
- package/src/commands/generate.js +104 -0
- package/src/commands/ws.js +157 -0
- package/src/compiler/codegen.js +1334 -0
- package/src/compiler/css.js +117 -0
- package/src/compiler/errors.js +65 -0
- package/src/compiler/expr.js +142 -0
- package/src/compiler/index.js +105 -0
- package/src/compiler/parse.js +115 -0
- package/src/compiler/strip-ts.js +39 -0
- package/src/compiler/template.js +419 -0
- package/src/index.js +128 -0
- package/src/runtime/app.js +115 -0
- package/src/runtime/component.js +222 -0
- package/src/runtime/css.js +35 -0
- package/src/runtime/errors.js +121 -0
- package/src/runtime/escape.js +62 -0
- package/src/runtime/events.js +151 -0
- package/src/runtime/hmr.js +157 -0
- package/src/runtime/index.js +40 -0
- package/src/runtime/overlay.js +95 -0
- package/src/runtime/reactive.js +172 -0
- package/src/runtime/router.js +423 -0
- package/src/runtime/scheduler.js +39 -0
- package/src/runtime/store.js +42 -0
- package/src/transform.js +106 -0
- package/templates/minimal/README.md +21 -0
- package/templates/minimal/easy.config.js +7 -0
- package/templates/minimal/index.html +13 -0
- package/templates/minimal/package.json +14 -0
- package/templates/minimal/src/App.easy +24 -0
- package/templates/minimal/src/main.js +4 -0
- package/templates/minimal/src/styles.css +14 -0
- package/templates/starter/README.md +18 -0
- package/templates/starter/easy.config.js +7 -0
- package/templates/starter/index.html +13 -0
- package/templates/starter/package.json +14 -0
- package/templates/starter/src/App.easy +69 -0
- package/templates/starter/src/components/Counter.easy +76 -0
- package/templates/starter/src/components/Greeting.easy +24 -0
- package/templates/starter/src/main.js +11 -0
- package/templates/starter/src/pages/About.easy +20 -0
- package/templates/starter/src/pages/Home.easy +69 -0
- package/templates/starter/src/styles.css +14 -0
- package/templates/tailwind/README.md +23 -0
- package/templates/tailwind/easy.config.js +7 -0
- package/templates/tailwind/index.html +19 -0
- package/templates/tailwind/package.json +14 -0
- package/templates/tailwind/src/App.easy +53 -0
- package/templates/tailwind/src/main.js +4 -0
- package/templates/tailwind/src/styles.css +4 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# {{project_name}}
|
|
2
|
+
|
|
3
|
+
Starter Easy.js app with:
|
|
4
|
+
|
|
5
|
+
- **Counter** — reactive `let` state
|
|
6
|
+
- **Routing** — Home ↔ About via `createRouter`
|
|
7
|
+
- **Props** — `<Greeting name={userName} />` → `{props.name}`
|
|
8
|
+
|
|
9
|
+
## Scripts
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm run dev
|
|
13
|
+
npm run build
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Dependencies
|
|
17
|
+
|
|
18
|
+
Uses `mez-easyjs` via a `file:` link when scaffolded from the monorepo, or `"^0.1.0"` when using the published package.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{project_name}}</title>
|
|
7
|
+
<link rel="stylesheet" href="/src/styles.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.js"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
let pathLabel = '/';
|
|
3
|
+
|
|
4
|
+
function goHome(e) {
|
|
5
|
+
e.preventDefault();
|
|
6
|
+
this.$router.push('/');
|
|
7
|
+
pathLabel = '/';
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function goAbout(e) {
|
|
11
|
+
e.preventDefault();
|
|
12
|
+
this.$router.push('/about');
|
|
13
|
+
pathLabel = '/about';
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<div class="app">
|
|
18
|
+
<header>
|
|
19
|
+
<a href="/" onclick={goHome}>{{project_name}}</a>
|
|
20
|
+
<nav>
|
|
21
|
+
<a href="/" onclick={goHome}>Home</a>
|
|
22
|
+
<a href="/about" onclick={goAbout}>About</a>
|
|
23
|
+
</nav>
|
|
24
|
+
<span class="path">{pathLabel}</span>
|
|
25
|
+
</header>
|
|
26
|
+
<main>
|
|
27
|
+
<router-view></router-view>
|
|
28
|
+
</main>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
.app header {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
gap: 1rem;
|
|
36
|
+
padding: 1rem 1.25rem;
|
|
37
|
+
border-bottom: 1px solid #d8e0ea;
|
|
38
|
+
background: #fff;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
header a {
|
|
42
|
+
text-decoration: none;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
color: #0b7a5c;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
nav {
|
|
48
|
+
display: flex;
|
|
49
|
+
gap: 0.85rem;
|
|
50
|
+
flex: 1;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
nav a {
|
|
54
|
+
color: #4a5a6d;
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.path {
|
|
59
|
+
font-family: ui-monospace, monospace;
|
|
60
|
+
font-size: 0.8rem;
|
|
61
|
+
color: #6b7c90;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
main {
|
|
65
|
+
padding: 1.5rem 1.25rem 3rem;
|
|
66
|
+
max-width: 40rem;
|
|
67
|
+
margin: 0 auto;
|
|
68
|
+
}
|
|
69
|
+
</style>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
let count = 0;
|
|
3
|
+
|
|
4
|
+
function inc() {
|
|
5
|
+
count++;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
function dec() {
|
|
9
|
+
count--;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function reset() {
|
|
13
|
+
count = 0;
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<div class="counter">
|
|
18
|
+
<h2>Counter</h2>
|
|
19
|
+
<p class="value">{count}</p>
|
|
20
|
+
<div class="actions">
|
|
21
|
+
<button onclick={dec}>−</button>
|
|
22
|
+
<button class="primary" onclick={inc}>+</button>
|
|
23
|
+
<button onclick={reset}>Reset</button>
|
|
24
|
+
</div>
|
|
25
|
+
{#if count >= 10}
|
|
26
|
+
<p class="note">Nice — state survives HMR if you edit this file.</p>
|
|
27
|
+
{/if}
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<style>
|
|
31
|
+
.counter {
|
|
32
|
+
border: 1px solid #d8e0ea;
|
|
33
|
+
border-radius: 10px;
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
background: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.counter h2 {
|
|
39
|
+
margin: 0;
|
|
40
|
+
font-size: 1rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.value {
|
|
44
|
+
font-size: 2rem;
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
margin: 0.4rem 0 0.85rem;
|
|
47
|
+
color: #0b7a5c;
|
|
48
|
+
font-family: ui-monospace, monospace;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.actions {
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: 0.4rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
button {
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
padding: 0.4rem 0.75rem;
|
|
59
|
+
border-radius: 8px;
|
|
60
|
+
border: 1px solid #c9d4e3;
|
|
61
|
+
background: #f6f8fb;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
button.primary {
|
|
66
|
+
background: #0b7a5c;
|
|
67
|
+
border-color: #0b7a5c;
|
|
68
|
+
color: #fff;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.note {
|
|
72
|
+
margin-top: 0.75rem;
|
|
73
|
+
color: #b45309;
|
|
74
|
+
font-size: 0.9rem;
|
|
75
|
+
}
|
|
76
|
+
</style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<p class="greeting">
|
|
5
|
+
Hello, <strong>{props.name}</strong>!
|
|
6
|
+
<span class="hint">(parent → child prop)</span>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
.greeting {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0.75rem 1rem;
|
|
13
|
+
border-radius: 10px;
|
|
14
|
+
background: rgba(11, 122, 92, 0.08);
|
|
15
|
+
border: 1px solid rgba(11, 122, 92, 0.25);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.hint {
|
|
19
|
+
display: block;
|
|
20
|
+
margin-top: 0.25rem;
|
|
21
|
+
font-size: 0.8rem;
|
|
22
|
+
color: #6b7c90;
|
|
23
|
+
}
|
|
24
|
+
</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { createApp, createRouter } from 'mez-easyjs';
|
|
2
|
+
import App from './App.easy';
|
|
3
|
+
|
|
4
|
+
const router = createRouter({
|
|
5
|
+
routes: [
|
|
6
|
+
{ path: '/', component: () => import('./pages/Home.easy') },
|
|
7
|
+
{ path: '/about', component: () => import('./pages/About.easy') }
|
|
8
|
+
]
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
createApp(App).use(router).mount('#app');
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
</script>
|
|
3
|
+
|
|
4
|
+
<section>
|
|
5
|
+
<h1>About</h1>
|
|
6
|
+
<p>
|
|
7
|
+
Scaffolded with <code>easy create</code> — the starter template shows
|
|
8
|
+
routing between Home and About.
|
|
9
|
+
</p>
|
|
10
|
+
</section>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
h1 {
|
|
14
|
+
letter-spacing: -0.03em;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
code {
|
|
18
|
+
font-size: 0.95em;
|
|
19
|
+
}
|
|
20
|
+
</style>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import Counter from '../components/Counter.easy';
|
|
3
|
+
import Greeting from '../components/Greeting.easy';
|
|
4
|
+
|
|
5
|
+
let userName = 'Easy developer';
|
|
6
|
+
let count = 0;
|
|
7
|
+
|
|
8
|
+
function inc() {
|
|
9
|
+
count++;
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<section class="home">
|
|
14
|
+
<h1>Starter demo</h1>
|
|
15
|
+
<p class="lede">
|
|
16
|
+
Reactivity, parent→child props, and routing — edit this file and save.
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
<Greeting name={userName} />
|
|
20
|
+
|
|
21
|
+
<div class="row">
|
|
22
|
+
<Counter />
|
|
23
|
+
<div class="panel">
|
|
24
|
+
<h2>Inline counter</h2>
|
|
25
|
+
<p>Local state: <strong>{count}</strong></p>
|
|
26
|
+
<button onclick={inc}>Increment</button>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</section>
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
.home h1 {
|
|
33
|
+
letter-spacing: -0.03em;
|
|
34
|
+
margin: 0 0 0.5rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.lede {
|
|
38
|
+
color: #4a5a6d;
|
|
39
|
+
margin: 0 0 1.25rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.row {
|
|
43
|
+
display: grid;
|
|
44
|
+
gap: 1rem;
|
|
45
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
46
|
+
margin-top: 1.25rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.panel {
|
|
50
|
+
border: 1px solid #d8e0ea;
|
|
51
|
+
border-radius: 10px;
|
|
52
|
+
padding: 1rem;
|
|
53
|
+
background: #fff;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.panel h2 {
|
|
57
|
+
margin: 0 0 0.5rem;
|
|
58
|
+
font-size: 1rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
button {
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
padding: 0.45rem 0.85rem;
|
|
64
|
+
border-radius: 8px;
|
|
65
|
+
border: 1px solid #c9d4e3;
|
|
66
|
+
background: #f6f8fb;
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
}
|
|
69
|
+
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# {{project_name}}
|
|
2
|
+
|
|
3
|
+
Easy.js + **Tailwind via Play CDN** (no PostCSS).
|
|
4
|
+
|
|
5
|
+
## How Tailwind is wired
|
|
6
|
+
|
|
7
|
+
`index.html` loads:
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
There is **no** `tailwind.config.js`, **no** `postcss.config.js`, and **no** `tailwindcss` npm dependency.
|
|
14
|
+
Use utility classes directly in `.easy` markup. Scoped `<style>` blocks still work.
|
|
15
|
+
|
|
16
|
+
> Play CDN is intended for development / prototyping. For production, consider a proper Tailwind build later.
|
|
17
|
+
|
|
18
|
+
## Scripts
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm run dev
|
|
22
|
+
npm run build
|
|
23
|
+
```
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{project_name}}</title>
|
|
7
|
+
<!--
|
|
8
|
+
Tailwind Play CDN (dev / prototyping only).
|
|
9
|
+
No PostCSS, no tailwindcss npm package, no tailwind.config.js.
|
|
10
|
+
Official: https://tailwindcss.com/docs/installation/play-cdn
|
|
11
|
+
-->
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
13
|
+
<link rel="stylesheet" href="/src/styles.css" />
|
|
14
|
+
</head>
|
|
15
|
+
<body class="min-h-screen bg-slate-50 text-slate-900 antialiased">
|
|
16
|
+
<div id="app"></div>
|
|
17
|
+
<script type="module" src="/src/main.js"></script>
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
let count = 0;
|
|
3
|
+
|
|
4
|
+
function inc() {
|
|
5
|
+
count++;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
function reset() {
|
|
9
|
+
count = 0;
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<main class="mx-auto max-w-lg px-6 py-16">
|
|
14
|
+
<p class="text-sm font-semibold uppercase tracking-wider text-emerald-600">
|
|
15
|
+
easy.js · Tailwind CDN
|
|
16
|
+
</p>
|
|
17
|
+
<h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900">
|
|
18
|
+
{{project_name}}
|
|
19
|
+
</h1>
|
|
20
|
+
<p class="mt-3 text-slate-600">
|
|
21
|
+
Utility classes come from the Play CDN script in <code class="rounded bg-slate-200 px-1 text-sm">index.html</code>.
|
|
22
|
+
Scoped CSS below still works alongside them.
|
|
23
|
+
</p>
|
|
24
|
+
|
|
25
|
+
<div class="mt-8 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
26
|
+
<p class="text-sm text-slate-500">Reactive counter</p>
|
|
27
|
+
<p class="mt-1 font-mono text-3xl font-bold text-emerald-700">{count}</p>
|
|
28
|
+
<div class="mt-4 flex gap-2">
|
|
29
|
+
<button
|
|
30
|
+
class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-500"
|
|
31
|
+
onclick={inc}
|
|
32
|
+
>
|
|
33
|
+
Increment
|
|
34
|
+
</button>
|
|
35
|
+
<button
|
|
36
|
+
class="rounded-lg border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
|
|
37
|
+
onclick={reset}
|
|
38
|
+
>
|
|
39
|
+
Reset
|
|
40
|
+
</button>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<p class="hint mt-6">Edit this file — HMR keeps your count; class edits update via the CDN.</p>
|
|
45
|
+
</main>
|
|
46
|
+
|
|
47
|
+
<style>
|
|
48
|
+
/* Scoped component CSS coexists with Tailwind CDN utilities */
|
|
49
|
+
.hint {
|
|
50
|
+
font-size: 0.875rem;
|
|
51
|
+
color: #64748b;
|
|
52
|
+
}
|
|
53
|
+
</style>
|