Polight · mlbiche · Feb 27, 2023 · Feb 27, 2023 · Feb 27, 2023 · Mar 1, 2023
diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@
 
 # LEGO: Modern Web-Components
 
+LEGO (_Lightweight Embedded Gluten-free Objects_) is a base class that you extend and provide you with methods to use ♻️ reactive and 🏡 **native web-components** that are easy to digest 🌱 for your browser.
+
 ## Native Web-Components?
 
 Yes, you write native HTML, CSS and JS and create a native web-components [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) compliant.
@@ -14,7 +16,7 @@ It's stable and predictable.
 
 If you have ever played with Web-Component-like frameworks (not to name Vue, React, Svelte…), you may know how debugging gets tricky and requires extra tooling.
 
-Because LEGO is native, your browser developper toobar is all you need.
+Because LEGO is native, your browser developer toolbar is all you need.
 - `debugger` works as expected,
 - _step-by-step_ debugging,
 - element inspector,
@@ -85,12 +87,12 @@ There's no [Vite](https://vitejs.dev/) nor other 3rd parties, it's [just an inte
 ## What is LEGO Behind?
 
 - 👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating)
-- 🌱 Zero dependency: it uses [Petit-Dom](https://github.com/yelouafi/petit-dom) which is stable and embedded, so no bad suprise in the future
+- 🌱 Zero dependency: it uses [Petit-Dom](https://github.com/yelouafi/petit-dom) which is stable and embedded, so no bad surprise in the future
 - ♻️ Reactive: updating the state recalculate the Virtual Dom when needed
 - 🚀 fast: using virtual dom through a thin layer makes it close to bare-metal
 - 💧 Simple: that's [Vanilla](http://vanilla-js.com/), there isn't much to know, it's a raw class to extend; no magic ✨
 - 🪶 3 directives to enhance HTML: `:if` for conditions, `:for` for loops, `@myfuncname` to call an action
-- 🏡 Native: LEGO components are actual native web-components, you benefit from all the today's and tomorrow's possibilites ([slot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), …).
+- 🏡 Native: LEGO components are actual native web-components, you benefit from all the today's and tomorrow's possibilities ([slot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), …).
 
 Lego is not (and will never be):
 - 🏯 A full bloated frontend framework with routing. [Others do it well](https://github.com/visionmedia/page.js).
@@ -107,4 +109,4 @@ Lego is not (and will never be):
 
 🔧 Customizing and contributing is just **much lighter** with simplicity, source that are easy to read, to hack and to maintain.
 
-🎈 You can [read the core code](https://github.com/Polight/lego/blob/master/src/lib/Component.js) that is only 61 <abbr title="Lines Of Code">LOC</abbr> resulting that Lego is **as light as 3Kb** for the full bundle!
+🎈 You can [read the core code](https://github.com/Polight/lego/blob/master/src/lib/Component.js) that is only 61 <abbr title="Lines Of Code">LOC</abbr> resulting that Lego is **as light as 3kb** for the full bundle!
diff --git a/docs/20-usage.md b/docs/20-usage.md
@@ -16,7 +16,7 @@ has_children: true
 A web-component can optionally have 3 parts: some HTML in a `<template>` tag, some JavaScript
 in a `<script>` tag and some CSS in a `<style>` tag.
 
-You can make a web-component for muliple reasons.
+You can make a web-component for multiple reasons.
 
 If you just want to re-use a piece of HTML, the `<template>`
 tag is all you need.
@@ -26,3 +26,4 @@ Bonus: it's fully scoped with no leaking out of context.
 
 When some user interaction or reactiveness is demanded, `<script>`
 is going to be the guy.
+<!-- FIXME: reactiveness is unknown -->
diff --git a/docs/20.07-attributes.md b/docs/20.07-attributes.md
@@ -10,103 +10,29 @@ parent: Usage
 #### Component Attributes
 
 Attributes declared on the components will be all be accessible through the `state`.
-If the property is initialized in the `this.state`, the attribute will be reactive:
-
-```html
-<x-user status="thinking 🤔"><x-user>
-```
-
-`status` will therefore be reactive and the _thinking 🤔_ attribute value will overwrite the _Happy 😄_ default status.
-
-⚠️ A property that is not declared in the `state` won't be reactive.
-
-These properties can be accessed through `this.getAttribute()` from within the component.
-After all, these components are just native! 🏡
-
-
-#### Slots
-
-[Slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) are part of the
-native web-component.
-Because Lego builds native web-components, you can use the standard _slots_ as documented.
+If the property is initialized in the `this.state`, the attribute will be reactive.
 
 Example:
 
 __index.html__
 ```html
-<user-profile>
-  <span>This user is in Paris</span>
-<user-profile>
-```
-
-__bricks/user-profile.html__
-```html
-<template>
-  <h1>User profile</h1>
-  <p>important information: <slot></slot></p>
-</template>
+<x-user status="Thinking 🤔"></x-user>
 ```
 
-Will write `…<p>important information: <span>This user is in Paris</span></p>`
-
-[See more advanced examples](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots).
-
-
-### Reactive CSS Within `<style>`
-
-CSS is much more fun when it's scoped.
-Here it come with the web-components.
-
-Here again, no trick, just the full power of web-components and scoping styles.
-Well, you should know that the css is reactive too! 😲
-
-Writing CSS is as easy as
-
+__bricks/x-user.html__
 ```html
 <script>
-  const state = { fontScale: 1 }
+  const state = { status: "Happy 😄" }
 </script>
 
 <template>
-  <h1>Bonjour!</h1>
+  <p>User status: ${ state.status }</p>
 </template>
-
-<style>
-  :host {
-    font-size: ${state.fontScale}rem;
-  }
-  h1 {
-    padding: 1rem;
-    text-align: center;
-  }
-</style>
 ```
 
-#### Host
-
-[`:host` is a native selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:host())
-for web-components.
-It allows to select the current component itself.
-
-#### Variables
-
-You can use variables in your CSS just like in your templates.
-
-Example:
-```html
-<script>
-  const state = { color: '#357' }
-</script>
-
-<template>
-  <h1>Bonjour<h1>
-</template>
+`status` will therefore be reactive and the _Thinking 🤔_ attribute value will overwrite the _Happy 😄_ default status.
 
-<style>
-  h1 {
-    color: ${ state.color };
-  }
-</style>
-```
+⚠️ A property that is not declared in the `state` won't be reactive.
 
-will apply the `#357` color onto `h1`.
+These properties can be accessed through `this.getAttribute()` from within the component.
+After all, these components are just native! 🏡
diff --git a/docs/20.10-script.md b/docs/20.10-script.md
@@ -11,7 +11,7 @@ parent: Usage
 
 ## `<script extend>` tag
 
-The "script extend" tag is has a special behavior.
+The "script extend" tag is a special behavior.
 You will create a class extending the component, that's how you extend your
 full component with advanced script.
 

diff --git a/docs/40-compiling.md b/docs/40-compiling.md
@@ -6,7 +6,7 @@ permalink: /compile-components/
 nav_order: 40
 ---
 
-Compiling Lego component is built-in with no extra installation; pretty straighforward.
+Compiling Lego component is built-in with no extra installation; pretty straightforward.
 
 ```sh
 npx lego [-w] [source_path] [target_path]

diff --git a/docs/50-configuring.md b/docs/50-configuring.md
@@ -6,7 +6,7 @@ permalink: /configuring-components/
 nav_order: 50
 ---
 
-The compiler can take serveral parameters: `sourceDir`, `destDist`, `watch`…
+The compiler can take several parameters: `sourceDir`, `destDist`, `watch`…
 
 These will allow you to fine grain your configuration when compiling.
 
@@ -48,3 +48,4 @@ Passing parameters in the CLI will override default parameters and custom config
 
 The command line accepts the following parameters: `npx lego <sourceDir> <destDir> <options>`.
 The only option for now is `-w` (stading for the `watch` config property).
+<!-- FIXME: stading is unknown -->
diff --git a/docs/README.md b/docs/README.md
@@ -1,3 +1,4 @@
+<!-- FIXME: what is the purpose of this README? -->
 Documentation was moved to https://github.com/Polight/lego/tree/master/docs
 
 ```html

diff --git a/docs/index.md b/docs/index.md
@@ -9,6 +9,24 @@ layout: home
 
 LEGO (_Lightweight Embedded Gluten-free Objects_) is a library for writing fast ♻️ reactive, 📦 scoped and predictable 🏡 **native web-components** in HTML/CSS/JS, that are easy to digest 🌱 for your browser.
 
+## Native Web-Components?
+
+Yes, you write native HTML, CSS and JS and create a native web-components [W3C](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium) compliant.
+
+It's stable and predictable.
+
+If you have ever played with Web-Component-like frameworks (not to name Vue, React, Svelte…), you may know how debugging gets tricky and requires extra tooling.
+
+Because LEGO is native, your browser developer toolbar is all you need.
+- `debugger` works as expected,
+- _step-by-step_ debugging,
+- element inspector,
+- the console with the live JS in the context…
+
+It's all just normal!
+
+## What does LEGO actually look like?
+
 Example (`my-example.html`):
 ```html
 <template>
@@ -19,34 +37,27 @@ Example (`my-example.html`):
 </style>
 ```
 
-These are **native HTML elements** with Shadow DOM, slots and all native features from the official specs.
-
-Lego is:
+## What is LEGO Behind?
 
-- 👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating).
-- 🌱 Low dependency: its single third-party is the minimalist [Petit-Dom](https://github.com/yelouafi/petit-dom) which itself has no dependency
+- 👙 Minimalist: ~74~ 61 lines of readable code in its core (non-optimised, uncompressed, no cheating)
+- 🌱 Zero dependency: it uses [Petit-Dom](https://github.com/yelouafi/petit-dom) which is stable and embedded, so no bad surprise in the future
 - ♻️ Reactive: updating the state recalculate the Virtual Dom when needed
 - 🚀 fast: using virtual dom through a thin layer makes it close to bare-metal
 - 💧 Simple: that's [Vanilla](http://vanilla-js.com/), there isn't much to know, it's a raw class to extend; no magic ✨
-- 🏡 Native: webcomponents are actual native webcomponents, you benefit from all the today's and tomorrow's possibilites (slot, encapsulation, …)
-- 🦺 Safe: because it has no third-party dependency and is
-fully based on browser features, it's secured and upgraded
-via your browser.
+- 🪶 3 directives to enhance HTML: `:if` for conditions, `:for` for loops, `@myfuncname` to call an action
+- 🏡 Native: LEGO components are actual native web-components, you benefit from all the today's and tomorrow's possibilities ([slot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots), [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), …).
 
 Lego is not (and will never be):
-- 🏯 A full bloated frontend framework with built-in routing. [Others do it well](https://github.com/visionmedia/page.js).
-- 🏗 A website builder with buit-in SSR or similar complexities.
+- 🏯 A full bloated frontend framework with routing. [Others do it well](https://github.com/visionmedia/page.js).
+- 🏗 A website builder with SSR or similar complexities.
 - 🔐 An HTML replacement that locks you into a specific technology.
-- 🧓 An old browsers or IE compatible library (you may try [webcomponent polyfills](https://github.com/webcomponents/polyfills) if you feel wild).
 
-View the [demo](https://polight.github.io/lego-demo/) and [their source](https://github.com/Polight/lego-demo) 🧪.
+## Next Steps and Demo
 
-Lego is inspired from the [native Web-Component spec](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [Riot](https://riot.js.org/).
+🧪 View the [demo](https://polight.github.io/lego-demo/) and [their source](https://github.com/Polight/lego-demo) 🧪.
 
-It's just **much lighter** with simplicity, a source code that is readable for a regular human which makes it accessible to hack, tweak and maintain in the loooong term.
-The [core lib](https://github.com/Polight/lego/blob/master/src/lib/Component.js) is only 61 <abbr title="Lines Of Code">LOC</abbr>!
-Lego is as light as **3Kb** for the full bundle!
+💭 Lego is inspired from the [native Web-Component spec](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and [Riot](https://riot.js.org/).
 
-No Babel transpiler, no Parcel, no Webpack… it just works out of the box.
+🔧 Customizing and contributing is just **much lighter** with simplicity, source that are easy to read, to hack and to maintain.
 
-Demo: [view in action](https://polight.github.io/lego-demo/)
+🎈 You can [read the core code](https://github.com/Polight/lego/blob/master/src/lib/Component.js) that is only 61 <abbr title="Lines Of Code">LOC</abbr> resulting that Lego is **as light as 3kb** for the full bundle!
diff --git a/src/compiler/vdom-parser.js b/src/compiler/vdom-parser.js
@@ -16,7 +16,8 @@ function cleanChildren(children = []) {
   })
 }
 
-function extractDirectives(node) {
+let isSetupMode = false
+function extractDirectives(node, isSetup = isSetupMode) {
   const directives = []
   node.attrs = node.attrs.reduce((attrs, attr) => {
     let name = attr.name
@@ -70,9 +71,10 @@ function convert(node, indentSize = 0) {
   return wrapDirectives(directives, vnode(node.nodeName, attributes, childrenIndent), indent)
 }
 
-function parse(html, indent) {
-  const document = parseFragment(html)
-  return convert(document, indent)
+function parse(html, isSetup) {
+  isSetupMode = isSetup
+  const document = parser.parseFragment(html)
+  return convert(document)
 }
 
 export default parse