Skip to content

Commit e4b9cfa

Browse files
chore: lint staged.
1 parent 325b601 commit e4b9cfa

8 files changed

Lines changed: 425 additions & 2 deletions

File tree

.husky/pre-commit

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#!/usr/bin/env sh
2+
npm exec lint-staged

.husky/pre-push

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/usr/bin/env sh
2+
npm run lint
3+
npm run build:esm

.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @knighted/develop
22

3-
A small in-browser playground for experimenting with `@knighted/jsx` and `@knighted/css`.
3+
Compiler-as-a-Service (at the edge of your browser) with `@knighted/jsx` and `@knighted/css`.
44

55
> ⚠️ Early project status: this package is pre-`1.0.0` and still actively evolving.
66

docs/article.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Forget The Build Step: Building A Compiler-as-a-Service Playground
2+
3+
In modern frontend development, we have normalized a heavy local setup cost. Want JSX and modern CSS dialects? Install a large dependency graph, start a dev server, and wait for transpilation loops before you can really iterate.
4+
5+
I wanted to test a different path: what if we removed the terminal from the inner loop?
6+
7+
That experiment became @knighted/develop, a browser-native playground that treats your tab as a real-time compiler host.
8+
9+
## The Core Idea
10+
11+
Most playgrounds rely on a backend build service. @knighted/develop flips that model:
12+
13+
- JSX compilation and execution happen in the browser.
14+
- CSS transforms (including CSS Modules, Less, and Sass) run in the browser.
15+
- Compilers are loaded on demand from CDN sources.
16+
17+
The result is a development loop that feels direct: type, compile, render, repeat.
18+
19+
## The Stack Behind It
20+
21+
Two libraries power the runtime:
22+
23+
- @knighted/jsx: JSX that resolves to real DOM nodes.
24+
- No virtual DOM requirement.
25+
- You can use declarative JSX and imperative DOM APIs in the same flow.
26+
- @knighted/css: A browser-capable CSS compiler pipeline.
27+
- Supports native CSS, CSS Modules, Less, and Sass.
28+
- Uses WASM-backed tooling for modern transforms.
29+
30+
Under the hood, the app leans on CDN resolution and lazy loading, so it fetches compiler/runtime pieces only when a mode needs them.
31+
32+
## Why "Compiler-as-a-Service"?
33+
34+
Compiler-as-a-Service here does not mean a remote build cluster.
35+
36+
It means the service boundary is split between:
37+
38+
- global CDN infrastructure (module and WASM delivery), and
39+
- the user device (actual compilation and execution).
40+
41+
If you switch into Sass mode, the browser loads Sass support. If you stay in native CSS mode, it does not pay that cost. The compiler behaves like an on-demand service, but the work stays local to the tab.
42+
43+
## What This Enables
44+
45+
- Fast feedback loops
46+
- Rendering updates track edits with minimal overhead.
47+
- Mixed declarative and imperative workflows
48+
- Useful for low-level UI experiments and DOM-heavy component prototypes.
49+
- Isolation testing with ShadowRoot
50+
- Toggle encapsulation to verify style boundary behavior.
51+
- Zero install inner loop
52+
- Open a page and start building.
53+
54+
## Why This Matters
55+
56+
The point is not to replace every production build pipeline.
57+
58+
The point is to prove a stronger baseline: modern browsers are now capable enough to host substantial parts of the authoring and compile cycle directly, without defaulting to local toolchain setup for every experiment.
59+
60+
For prototyping and component iteration, that changes the cost model dramatically.
61+
62+
## Try It
63+
64+
- Live playground: https://knightedcodemonkey.github.io/develop/
65+
- Source repository: https://github.com/knightedcodemonkey/develop
66+
67+
## Notes For Publishing
68+
69+
If you post this on Medium (or similar), include a short screen recording that shows:
70+
71+
- switching style modes (CSS -> Modules -> Less -> Sass),
72+
- toggling ShadowRoot on and off, and
73+
- immediate preview updates while typing.
74+
75+
That visual sequence communicates the Compiler-as-a-Service model faster than any architecture diagram.

0 commit comments

Comments
 (0)