Proofreading the docs... #37

mlbiche · 2023-03-01T08:12:58Z

No description provided.

mlbiche · 2023-03-01T08:15:01Z

Should the Welcome page be updated according to the recent README.md updates?

mlbiche · 2023-03-01T08:16:25Z

I don't really understand the last sentence in the Reactive properties page:

When state is just mutated, the changed(changedProps) is called.
This changed() method is called before (re-)rendering.

vinyll · 2023-03-02T08:31:19Z

FYI the default writing style may change soon.
However the core will remain almost intact.

vinyll · 2023-03-02T08:41:04Z

Should the Welcome page be updated according to the recent README.md updates?

Probably that it should be updated accordingly 👍

I don't really understand the last sentence in the Reactive properties page

Not clear at all!
Here's an example that will display the name of the values that changed in the state everytime the state is updated (like when calling render(…)):

export default class extends Lego {
  changed(props) {
    console.info(`the following state properties changed: ${Object.keys(props).join(',')}`)
  }
}

vinyll · 2023-03-02T10:10:39Z

@mlbiche the doc was updated according to new new coding style.

If that work is approved and your doc branch is in progress we will pobably need to merge your work with that one.

mlbiche · 2023-03-03T10:53:00Z

@vinyll Yes, thank you, I've seen the discussions and PR 👍

What is the use case of changed? I can only see an interest for debugging.

Consequently, I propose to rebase my branch on yours feature/setup and update this PR to points to feature/setup. Is that OK for you?

docs/index.md

vinyll · 2023-03-03T11:18:01Z

dist/lego.min.js

@@ -1 +1 @@
-const e={},t=e=>null===e||Array.isArray(e)&&0===e.length,n=e=>Array.isArray(e)&&e.length>0,i=e=>"string"==typeof e||"number"==typeof e,r=e=>1===e?.vtype,o=e=>2===e?.vtype,s=e=>4===e?.vtype;function c(t,n,...i){return n=n??e,function(e,t,n){if(n!=n)throw new Error("Invalid NaN key");const i="string"==typeof e?1:(r=e,"function"==typeof r?.mount?4:"function"==typeof e?2:void 0);var r;if(void 0===i)throw new Error("Invalid VNode type");return{vtype:i,type:e,key:n,props:t}}(t,n=i.length>1?Object.assign({},n,{children:i}):1===i.length?Object.assign({},n,{children:i[0]}):n,n.key)}function l(e){return{mount(t,n){t[e]=n},patch(t,n,i){n!==i&&(t[e]=n)},unmount(t,n){t[e]=null}}}const d={selected:l("selected"),checked:l("checked"),value:l("value"),innerHTML:l("innerHTML")},u="http://www.w3.org/1999/xlink",h={show:u,actuate:u,href:u};function f(e){if(1===e.type)return e.node;if(4===e.type)return f(e.children[0]);if(8===e.type)return f(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function p(e){if(1===e.type)return e.node.parentNode;if(4===e.type)return p(e.children[0]);if(8===e.type)return p(e.childRef);throw new Error("Unkown ref type "+e)}function a(e){if(1===e.type)return e.node.nextSibling;if(4===e.type)return a(e.children[e.children.length-1]);if(8===e.type)return a(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function y(e,t,n){if(1===t.type)e.insertBefore(t.node,n);else if(4===t.type)t.children.forEach((t=>{y(e,t,n)}));else{if(8!==t.type)throw new Error("Unkown ref type "+JSON.stringify(t));y(e,t.childRef,n)}}function v(e,t){if(1===t.type)e.removeChild(t.node);else if(4===t.type)t.children.forEach((t=>{v(e,t)}));else{if(8!==t.type)throw new Error("Unkown ref type "+t);v(e,t.childRef)}}function w(e,t,n,i){if(!0===n)e.setAttribute(t,"");else if(!1===n)e.removeAttribute(t);else{var r=i?h[t]:void 0;void 0!==r?e.setAttributeNS(r,t,n):e.setAttribute(t,n)}}const m={isSvg:!1,directives:d};class _{constructor(e,t){this.props=e,this._STATE_={env:t,vnode:null,parentDomNode:null,ref:g(null)},this.render=this.render.bind(this)}setProps(e){this.oldProps=this.props,this.props=e}render(e){const t=this._STATE_,n=t.vnode;if(t.vnode=e,null==t.parentDomNode){let n=p(t.ref);if(null==n)return void(t.ref=g(e,t.env));t.parentDomNode=n}t.ref=k(t.parentDomNode,e,n,t.ref,t.env)}}function g(e,c=m){if(t(e))return{type:1,node:document.createComment("NULL")};if(i(e))return{type:1,node:document.createTextNode(e)};if(r(e)){let t,{type:n,props:i}=e;"svg"!==n||c.isSvg||(c=Object.assign({},c,{isSVG:!0})),t=c.isSVG?document.createElementNS("http://www.w3.org/2000/svg",n):document.createElement(n),function(e,t,n){for(var i in t)"key"===i||"children"===i||i in n.directives||(i.startsWith("on")?e[i.toLowerCase()]=t[i]:w(e,i,t[i],n.isSVG))}(t,i,c);let r=null==i.children?i.children:g(i.children,c);return null!=r&&y(t,r),function(e,t,n){for(let i in t)i in n.directives&&n.directives[i].mount(e,t[i])}(t,i,c),{type:1,node:t,children:r}}if(n(e))return{type:4,children:e.map((e=>g(e,c)))};if(o(e)){let t=e.type(e.props);return{type:8,childRef:g(t,c),childState:t}}if(s(e)){let t=new _(e.props,c);return e.type.mount(t),{type:8,childRef:t._STATE_.ref,childState:t}}if(e instanceof Node)return{type:1,node:e};if(void 0===e)throw new Error("mount: vnode is undefined!");throw new Error("mount: Invalid Vnode!")}function S(e,c,l,d,u=m){if(l===c)return d;if(t(c)&&t(l))return d;if(i(c)&&i(l))return d.node.nodeValue=c,d;if(r(c)&&r(l)&&c.type===l.type){"svg"!==c.type||u.isSvg||(u=Object.assign({},u,{isSVG:!0})),function(e,t,n,i){for(var r in t)if("key"!==r&&"children"!==r&&!(r in i.directives)){var o=n[r],s=t[r];o!==s&&(r.startsWith("on")?e[r.toLowerCase()]=s:w(e,r,s,i.isSVG))}for(r in n)"key"===r||"children"===r||r in i.directives||r in t||(r.startsWith("on")?e[r.toLowerCase()]=null:e.removeAttribute(r))}(d.node,c.props,l.props,u);let e=l.props.children,t=c.props.children;return null==e?null!=t&&(d.children=g(t,u),y(d.node,d.children)):null==t?(d.node.textContent="",b(e,d.children,u),d.children=null):d.children=k(d.node,t,e,d.children,u),function(e,t,n,i){for(let r in t)r in i.directives&&i.directives[r].patch(e,t[r],n[r]);for(let r in n)r in i.directives&&!(r in t)&&i.directives[r].unmount(e,n[r])}(d.node,c.props,l.props,u),d}if(n(c)&&n(l))return function(e,t,n,i,r){const o=a(i),s=Array(t.length);let c,l,d,u,h,p=i.children,w=0,m=0,_=t.length-1,E=n.length-1;for(;w<=_&&m<=E;){if(null===p[m]){m++;continue}if(null===p[E]){E--;continue}if(c=n[m],l=t[w],l?.key===c?.key){d=p[m],u=s[w]=k(e,l,c,d,r),w++,m++;continue}if(c=n[E],l=t[_],l?.key===c?.key){d=p[E],u=s[_]=k(e,l,c,d,r),_--,E--;continue}if(null==h){h={};for(let e=m;e<=E;e++)c=n[e],null!=c?.key&&(h[c.key]=e)}l=t[w];const i=null!=l?.key?h[l.key]:null;null!=i?(c=n[i],d=p[i],u=s[w]=S(e,l,c,d,r),y(e,u,f(p[m])),u!==d&&(v(e,d),b(c,d,r)),p[i]=null):(u=s[w]=g(l,r),y(e,u,f(p[m]))),w++}const A=_<t.length-1?f(s[_+1]):o;for(;w<=_;){const n=g(t[w],r);s[w]=n,y(e,n,A),w++}for(;m<=E;)d=p[m],null!=d&&(v(e,d),b(n[m],d,r)),m++;i.children=s}(e,c,l,d,u),d;if(o(c)&&o(l)&&c.type===l.type){let t=c.type;if(null!=t.shouldUpdate?t.shouldUpdate(l.props,c.props):function(e,t){if(e===t)return!1;for(let n in t)if(e[n]!==t[n])return!0;return!1}(l.props,c.props)){let n=t(c.props),i=S(e,n,d.childState,d.childRef,u);return i!==d.childRef?{type:8,childRef:i,childState:n}:(d.childState=n,d)}return d}if(s(c)&&s(l)&&c.type===l.type){const t=d.childState,n=t._STATE_;return n.env=u,n.parentNode=e,t.setProps(c.props),c.type.patch(t),d.childRef!==n.ref?{type:8,childRef:n.ref,childState:t}:d}return c instanceof Node&&l instanceof Node?(d.node=c,d):g(c,u)}function b(e,t,i){r(e)?(!function(e,t,n){for(let i in t)i in n.directives&&n.directives[i].unmount(e,t[i])}(t.node,e.props,i),null!=e.props.children&&b(e.props.children,t.children,i)):n(e)?e.forEach(((e,n)=>b(e,t.children[n],i))):o(e)?b(t.childState,t.childRef,i):s(e)&&e.type.unmount(t.childState)}function k(e,t,n,i,r){const o=S(e,t,n,i,r);return o!==i&&(!function(e,t,n){y(e,t,f(n)),v(e,n)}(e,o,i),b(n,i,r)),o}function E(e,t,n={}){let i=t.$$PETIT_DOM_REF,r=Object.assign({},m);if(Object.assign(r.directives,n.directives),null==i){const n=g(e,r);t.$$PETIT_DOM_REF={ref:n,vnode:e},t.textContent="",y(t,n,null)}else i.ref=k(t,e,i.vnode,i.ref,r),i.vnode=e}function A(e){if(e.includes("-")){const t=e.split("-");e=t[0]+t.splice(1).map((e=>e[0].toUpperCase()+e.substr(1))).join("")}return e}class N extends HTMLElement{constructor(){super(),this.useShadowDOM=!0,this.__isConnected=!1,this.__state={},this.init&&this.init(),this.watchProps=Object.keys(this.__state),this.__attributesToState(),this.document=this.useShadowDOM?this.attachShadow({mode:"open"}):this}__attributesToState(){Object.assign(this.state,Array.from(this.attributes).reduce(((e,t)=>Object.assign(e,{[A(t.name)]:t.value})),{}))}get vdom(){return({state:e})=>""}get vstyle(){return({state:e})=>""}setAttribute(e,t){super.setAttribute(e,t);const n=A(e);this.watchProps.includes(n)&&this.render({[n]:t})}removeAttribute(e){super.removeAttribute(e);const t=A(e);this.watchProps.includes(t)&&t in this.state&&(this.render({[t]:null}),delete this.state[t])}connectedCallback(){this.__isConnected=!0,this.connected&&this.connected(),this.render()}disconnectedCallback(){this.__isConnected=!1,this.setState({}),this.disconnected&&this.disconnected()}async setState(e={}){Object.assign(this.__state,e),this.changed&&this.__isConnected&&await this.changed(e)}set state(e){this.setState(e)}get state(){return this.__state}async render(e){if(await this.setState(e),this.__isConnected)return E([this.vdom({state:this.__state}),this.vstyle({state:this.__state})],this.document)}}export{N as Component,c as h,E as render};
+export{h,render}from"../../../../../../node_modules/petit-dom/src/index.js";export{default as Component}from"../../../../../../src/lib/Component.js";


This file seems broken :/

I think it comes from your PR? After updating the PR to target your branch, no changes are detected in this file.

yup, new builds came out!
Checkout the v2 branch for updates

vinyll · 2023-03-03T11:22:52Z

docs/20.07-attributes.md

 </script>

 <template>
-  <h1>Bonjour!</h1>
+  <p>User status: {{ state.status }}</p>


Nope, that should be ${ state.status }

docs/20.07-attributes.md

mlbiche · 2023-03-03T11:25:09Z

docs/20-usage.md

@@ -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 -->


What do you think about responsiveness or reactivity?

go for reactivity

mlbiche · 2023-03-03T11:27:16Z

docs/50-configuring.md

@@ -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 -->


I don't know what you mean here?

We should rephrase to something like:

The `-w` relates to the `watch` config property and will rebuild your components when they change.

mlbiche · 2023-03-03T11:27:28Z

docs/README.md

@@ -1,3 +1,4 @@
+<!-- FIXME: what is the purpose of this README? -->


Is this file required?

Should it describe how to compile the doc instead?

That is a good idea!
It could also tell it is based on Jekyll

vinyll · 2023-03-03T19:47:47Z

@mlbiche the doc is fully changed this way:

/docs
-- /v1 # Class based writing
-- /v2 # New Svelte-like writing

The installation of v2 can be done with npm i @polight/lego@beta.

Opinions, PR, reviews, improvments are more than welcome 🤲

See https://lego.js.org/ to view the new proposal.

vinyll · 2023-03-08T23:07:51Z

@mlbiche FYI the demo was re-written with the new version.

vinyll · 2023-03-08T23:11:47Z

This should be rebased with v2 and merged there

mlbiche · 2025-04-14T17:55:42Z

@vinyll Hello there since a long time... (rebase was tedious) 🙄 Since the doc update stating v1 will remain, is this documentation update to v2 still up to date? Or should I start a new draft from master instead (since I have also found typo in most recent doc changes)?

vinyll · 2025-04-14T21:25:11Z

v1.9.0 was just released.
It is based on previous v1 meaning we are using export default class extends Lego {… and giving up the v2 magic 🪄 .

What's up with v1.9.0?

The code has reduced and simplified a little more again using modern JS.

state can be declared as a property
setState and render have become sync methods
connected() can be called to use the DOM (sync and reliable)
useShadowDOM can be set from the class itself

Here's a sample:

<template>
  <button @click="increment">Click me</button>
  <p>Count: ${state.count}</p>
</template>

<script>
  export default class extends Lego {
    state = { count: 0 }
    useShadowDOM = false
    
    increment() {
      this.render({ count: this.state.count + 1 })
    }
  }
</script>

With this release Lego is making a new step towards simplicity!

We do need the documentation to be updated accordingly, besides improving it's readability and providing more useful samples :)

mlbiche · 2025-04-15T08:25:11Z

@vinyll Thank you for your feedback!

I'll try to put some time and efforts in the coming days to propose something.

Just to be sure, by saying "giving up", you mean stopping further development for v2? As the documentation currently states "current" for v2 (but it is probably not up-to-date), I am a bit confused...

vinyll · 2025-04-15T19:56:23Z

v2@beta in its current proposal will not move to stable as such and will not be continued.
v1 is stable and v1.9.0 is the one that will be continued from now on as it's been working well and is better reading.

The documentation for v2 should be moved to archived and discontinued.
V1 should be upgraded to the improved writing (newer js) implemented in v1.9.

I can make myself avaible for pairing on the new documentation 💯

mlbiche mentioned this pull request Mar 1, 2023

Missing documentation for passing objects as attributes #23

Open

mlbiche force-pushed the docs/proofreading branch 2 times, most recently from 4f945ba to f63c855 Compare March 3, 2023 11:18

mlbiche changed the base branch from master to feature/setup March 3, 2023 11:18

mlbiche commented Mar 3, 2023

View reviewed changes

docs/index.md Outdated Show resolved Hide resolved

vinyll reviewed Mar 3, 2023

View reviewed changes

mlbiche commented Mar 3, 2023

View reviewed changes

vinyll changed the base branch from feature/setup to v2 March 8, 2023 23:12

echb and others added 10 commits April 14, 2025 19:41

add: feature setup on scrip tag

974ba93

docs: fix wording

3bcb668

docs: remove duplicated doc

9d58db9

docs: fix closing tag

72c22de

docs: clarify the component attributes example

96156a6

docs: typo errors

6a33b1b

docs: update docs homepage according to latest readme updates

e372871

docs: typo fixes

ffda6b9

docs: wrong reactive statement

3a23801

docs: fix unit

5bd92ea

mlbiche force-pushed the docs/proofreading branch from d3fe5e1 to 5bd92ea Compare April 14, 2025 17:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proofreading the docs... #37

Proofreading the docs... #37

mlbiche commented Mar 1, 2023

mlbiche commented Mar 1, 2023 •

edited

Loading

mlbiche commented Mar 1, 2023

vinyll commented Mar 2, 2023

vinyll commented Mar 2, 2023

vinyll commented Mar 2, 2023

mlbiche commented Mar 3, 2023

vinyll Mar 3, 2023

mlbiche Mar 3, 2023

vinyll Mar 8, 2023

vinyll Mar 3, 2023

mlbiche Mar 3, 2023

mlbiche Mar 3, 2023

vinyll Mar 8, 2023

mlbiche Mar 3, 2023

vinyll Mar 3, 2023

mlbiche Mar 3, 2023

mlbiche Mar 3, 2023

vinyll Mar 3, 2023

vinyll commented Mar 3, 2023

vinyll commented Mar 8, 2023

vinyll commented Mar 8, 2023

mlbiche commented Apr 14, 2025

vinyll commented Apr 14, 2025 •

edited

Loading

mlbiche commented Apr 15, 2025

vinyll commented Apr 15, 2025

		@@ -1 +1 @@
		const e={},t=e=>null===e\|\|Array.isArray(e)&&0===e.length,n=e=>Array.isArray(e)&&e.length>0,i=e=>"string"==typeof e\|\|"number"==typeof e,r=e=>1===e?.vtype,o=e=>2===e?.vtype,s=e=>4===e?.vtype;function c(t,n,...i){return n=n??e,function(e,t,n){if(n!=n)throw new Error("Invalid NaN key");const i="string"==typeof e?1:(r=e,"function"==typeof r?.mount?4:"function"==typeof e?2:void 0);var r;if(void 0===i)throw new Error("Invalid VNode type");return{vtype:i,type:e,key:n,props:t}}(t,n=i.length>1?Object.assign({},n,{children:i}):1===i.length?Object.assign({},n,{children:i[0]}):n,n.key)}function l(e){return{mount(t,n){t[e]=n},patch(t,n,i){n!==i&&(t[e]=n)},unmount(t,n){t[e]=null}}}const d={selected:l("selected"),checked:l("checked"),value:l("value"),innerHTML:l("innerHTML")},u="http://www.w3.org/1999/xlink",h={show:u,actuate:u,href:u};function f(e){if(1===e.type)return e.node;if(4===e.type)return f(e.children[0]);if(8===e.type)return f(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function p(e){if(1===e.type)return e.node.parentNode;if(4===e.type)return p(e.children[0]);if(8===e.type)return p(e.childRef);throw new Error("Unkown ref type "+e)}function a(e){if(1===e.type)return e.node.nextSibling;if(4===e.type)return a(e.children[e.children.length-1]);if(8===e.type)return a(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function y(e,t,n){if(1===t.type)e.insertBefore(t.node,n);else if(4===t.type)t.children.forEach((t=>{y(e,t,n)}));else{if(8!==t.type)throw new Error("Unkown ref type "+JSON.stringify(t));y(e,t.childRef,n)}}function v(e,t){if(1===t.type)e.removeChild(t.node);else if(4===t.type)t.children.forEach((t=>{v(e,t)}));else{if(8!==t.type)throw new Error("Unkown ref type "+t);v(e,t.childRef)}}function w(e,t,n,i){if(!0===n)e.setAttribute(t,"");else if(!1===n)e.removeAttribute(t);else{var r=i?h[t]:void 0;void 0!==r?e.setAttributeNS(r,t,n):e.setAttribute(t,n)}}const m={isSvg:!1,directives:d};class _{constructor(e,t){this.props=e,this._STATE_={env:t,vnode:null,parentDomNode:null,ref:g(null)},this.render=this.render.bind(this)}setProps(e){this.oldProps=this.props,this.props=e}render(e){const t=this._STATE_,n=t.vnode;if(t.vnode=e,null==t.parentDomNode){let n=p(t.ref);if(null==n)return void(t.ref=g(e,t.env));t.parentDomNode=n}t.ref=k(t.parentDomNode,e,n,t.ref,t.env)}}function g(e,c=m){if(t(e))return{type:1,node:document.createComment("NULL")};if(i(e))return{type:1,node:document.createTextNode(e)};if(r(e)){let t,{type:n,props:i}=e;"svg"!==n\|\|c.isSvg\|\|(c=Object.assign({},c,{isSVG:!0})),t=c.isSVG?document.createElementNS("http://www.w3.org/2000/svg",n):document.createElement(n),function(e,t,n){for(var i in t)"key"===i\|\|"children"===i\|\|i in n.directives\|\|(i.startsWith("on")?e[i.toLowerCase()]=t[i]:w(e,i,t[i],n.isSVG))}(t,i,c);let r=null==i.children?i.children:g(i.children,c);return null!=r&&y(t,r),function(e,t,n){for(let i in t)i in n.directives&&n.directives[i].mount(e,t[i])}(t,i,c),{type:1,node:t,children:r}}if(n(e))return{type:4,children:e.map((e=>g(e,c)))};if(o(e)){let t=e.type(e.props);return{type:8,childRef:g(t,c),childState:t}}if(s(e)){let t=new _(e.props,c);return e.type.mount(t),{type:8,childRef:t._STATE_.ref,childState:t}}if(e instanceof Node)return{type:1,node:e};if(void 0===e)throw new Error("mount: vnode is undefined!");throw new Error("mount: Invalid Vnode!")}function S(e,c,l,d,u=m){if(l===c)return d;if(t(c)&&t(l))return d;if(i(c)&&i(l))return d.node.nodeValue=c,d;if(r(c)&&r(l)&&c.type===l.type){"svg"!==c.type\|\|u.isSvg\|\|(u=Object.assign({},u,{isSVG:!0})),function(e,t,n,i){for(var r in t)if("key"!==r&&"children"!==r&&!(r in i.directives)){var o=n[r],s=t[r];o!==s&&(r.startsWith("on")?e[r.toLowerCase()]=s:w(e,r,s,i.isSVG))}for(r in n)"key"===r\|\|"children"===r\|\|r in i.directives\|\|r in t\|\|(r.startsWith("on")?e[r.toLowerCase()]=null:e.removeAttribute(r))}(d.node,c.props,l.props,u);let e=l.props.children,t=c.props.children;return null==e?null!=t&&(d.children=g(t,u),y(d.node,d.children)):null==t?(d.node.textContent="",b(e,d.children,u),d.children=null):d.children=k(d.node,t,e,d.children,u),function(e,t,n,i){for(let r in t)r in i.directives&&i.directives[r].patch(e,t[r],n[r]);for(let r in n)r in i.directives&&!(r in t)&&i.directives[r].unmount(e,n[r])}(d.node,c.props,l.props,u),d}if(n(c)&&n(l))return function(e,t,n,i,r){const o=a(i),s=Array(t.length);let c,l,d,u,h,p=i.children,w=0,m=0,_=t.length-1,E=n.length-1;for(;w<=_&&m<=E;){if(null===p[m]){m++;continue}if(null===p[E]){E--;continue}if(c=n[m],l=t[w],l?.key===c?.key){d=p[m],u=s[w]=k(e,l,c,d,r),w++,m++;continue}if(c=n[E],l=t[_],l?.key===c?.key){d=p[E],u=s[_]=k(e,l,c,d,r),_--,E--;continue}if(null==h){h={};for(let e=m;e<=E;e++)c=n[e],null!=c?.key&&(h[c.key]=e)}l=t[w];const i=null!=l?.key?h[l.key]:null;null!=i?(c=n[i],d=p[i],u=s[w]=S(e,l,c,d,r),y(e,u,f(p[m])),u!==d&&(v(e,d),b(c,d,r)),p[i]=null):(u=s[w]=g(l,r),y(e,u,f(p[m]))),w++}const A=_<t.length-1?f(s[_+1]):o;for(;w<=_;){const n=g(t[w],r);s[w]=n,y(e,n,A),w++}for(;m<=E;)d=p[m],null!=d&&(v(e,d),b(n[m],d,r)),m++;i.children=s}(e,c,l,d,u),d;if(o(c)&&o(l)&&c.type===l.type){let t=c.type;if(null!=t.shouldUpdate?t.shouldUpdate(l.props,c.props):function(e,t){if(e===t)return!1;for(let n in t)if(e[n]!==t[n])return!0;return!1}(l.props,c.props)){let n=t(c.props),i=S(e,n,d.childState,d.childRef,u);return i!==d.childRef?{type:8,childRef:i,childState:n}:(d.childState=n,d)}return d}if(s(c)&&s(l)&&c.type===l.type){const t=d.childState,n=t._STATE_;return n.env=u,n.parentNode=e,t.setProps(c.props),c.type.patch(t),d.childRef!==n.ref?{type:8,childRef:n.ref,childState:t}:d}return c instanceof Node&&l instanceof Node?(d.node=c,d):g(c,u)}function b(e,t,i){r(e)?(!function(e,t,n){for(let i in t)i in n.directives&&n.directives[i].unmount(e,t[i])}(t.node,e.props,i),null!=e.props.children&&b(e.props.children,t.children,i)):n(e)?e.forEach(((e,n)=>b(e,t.children[n],i))):o(e)?b(t.childState,t.childRef,i):s(e)&&e.type.unmount(t.childState)}function k(e,t,n,i,r){const o=S(e,t,n,i,r);return o!==i&&(!function(e,t,n){y(e,t,f(n)),v(e,n)}(e,o,i),b(n,i,r)),o}function E(e,t,n={}){let i=t.$$PETIT_DOM_REF,r=Object.assign({},m);if(Object.assign(r.directives,n.directives),null==i){const n=g(e,r);t.$$PETIT_DOM_REF={ref:n,vnode:e},t.textContent="",y(t,n,null)}else i.ref=k(t,e,i.vnode,i.ref,r),i.vnode=e}function A(e){if(e.includes("-")){const t=e.split("-");e=t[0]+t.splice(1).map((e=>e[0].toUpperCase()+e.substr(1))).join("")}return e}class N extends HTMLElement{constructor(){super(),this.useShadowDOM=!0,this.__isConnected=!1,this.__state={},this.init&&this.init(),this.watchProps=Object.keys(this.__state),this.__attributesToState(),this.document=this.useShadowDOM?this.attachShadow({mode:"open"}):this}__attributesToState(){Object.assign(this.state,Array.from(this.attributes).reduce(((e,t)=>Object.assign(e,{[A(t.name)]:t.value})),{}))}get vdom(){return({state:e})=>""}get vstyle(){return({state:e})=>""}setAttribute(e,t){super.setAttribute(e,t);const n=A(e);this.watchProps.includes(n)&&this.render({[n]:t})}removeAttribute(e){super.removeAttribute(e);const t=A(e);this.watchProps.includes(t)&&t in this.state&&(this.render({[t]:null}),delete this.state[t])}connectedCallback(){this.__isConnected=!0,this.connected&&this.connected(),this.render()}disconnectedCallback(){this.__isConnected=!1,this.setState({}),this.disconnected&&this.disconnected()}async setState(e={}){Object.assign(this.__state,e),this.changed&&this.__isConnected&&await this.changed(e)}set state(e){this.setState(e)}get state(){return this.__state}async render(e){if(await this.setState(e),this.__isConnected)return E([this.vdom({state:this.__state}),this.vstyle({state:this.__state})],this.document)}}export{N as Component,c as h,E as render};
		export{h,render}from"../../../../../../node_modules/petit-dom/src/index.js";export{default as Component}from"../../../../../../src/lib/Component.js";

		@@ -1,3 +1,4 @@
		<!-- FIXME: what is the purpose of this README? -->

Proofreading the docs... #37

Are you sure you want to change the base?

Proofreading the docs... #37

Conversation

mlbiche commented Mar 1, 2023

mlbiche commented Mar 1, 2023 • edited Loading

mlbiche commented Mar 1, 2023

vinyll commented Mar 2, 2023

vinyll commented Mar 2, 2023

vinyll commented Mar 2, 2023

mlbiche commented Mar 3, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vinyll commented Mar 3, 2023

vinyll commented Mar 8, 2023

vinyll commented Mar 8, 2023

mlbiche commented Apr 14, 2025

vinyll commented Apr 14, 2025 • edited Loading

What's up with v1.9.0?

mlbiche commented Apr 15, 2025

vinyll commented Apr 15, 2025

mlbiche commented Mar 1, 2023 •

edited

Loading

vinyll commented Apr 14, 2025 •

edited

Loading