From acc0a58f5a05904ffd88a3e7ab82d69d4cee8338 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 10 Dec 2023 10:53:17 +0100 Subject: [PATCH 1/2] chore: format code with prettier --- .vscode/settings.json | 5 +- examples/attach-effect/Counter.mjs | 7 +- examples/attach-effect/Decrease.mjs | 7 +- examples/demo/BooleanPropTest.mjs | 2 +- examples/demo/Counter.mjs | 6 +- examples/demo/HelloWorld.mjs | 2 +- examples/demo/SimpleText.mjs | 2 +- examples/props-blueprint/hello-world.js | 2 +- examples/templating/index.js | 26 +- examples/type-restore/Counter.mjs | 6 +- examples/type-restore/HelloWorld.mjs | 6 +- examples/type-restore/Object.mjs | 46 +- examples/type-restore/Toggle.mjs | 8 +- package-lock.json | 20 +- package.json | 4 +- site/nitro.config.mjs | 2 +- site/public/prism.js | 761 ++++++++++++++++++++- site/src/components/code-block.js | 6 +- site/src/components/my-hello-world.js | 6 +- site/src/components/my-quote.js | 7 +- site/src/components/vanilla-hello-world.js | 4 +- src/WebComponent.js | 47 +- src/html.js | 73 +- src/utils/create-element.mjs | 4 +- src/utils/get-kebab-case.mjs | 2 +- src/utils/index.js | 2 +- src/web-component-base.js | 200 ------ tsconfig.json | 6 +- 28 files changed, 952 insertions(+), 317 deletions(-) delete mode 100644 src/web-component-base.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 8f21b4c..a90d63b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "js/ts.implicitProjectConfig.checkJs": true -} \ No newline at end of file + "js/ts.implicitProjectConfig.checkJs": true, + "editor.formatOnSave": true +} diff --git a/examples/attach-effect/Counter.mjs b/examples/attach-effect/Counter.mjs index 30ea586..35b88b6 100644 --- a/examples/attach-effect/Counter.mjs +++ b/examples/attach-effect/Counter.mjs @@ -5,13 +5,10 @@ export class Counter extends WebComponent { onInit() { this.props.count = 0; this.onclick = () => ++this.props.count; - attachEffect( - this.props.count, - (count) => console.log(count) - ); + attachEffect(this.props.count, (count) => console.log(count)); } - afterViewInit(){ + afterViewInit() { attachEffect(this.props.count, (count) => console.log(count + 100)); } diff --git a/examples/attach-effect/Decrease.mjs b/examples/attach-effect/Decrease.mjs index 898d144..b9c990c 100644 --- a/examples/attach-effect/Decrease.mjs +++ b/examples/attach-effect/Decrease.mjs @@ -6,13 +6,10 @@ export class Decrease extends WebComponent { onInit() { this.props.count = 999; this.onclick = () => --this.props.count; - attachEffect( - this.props.count, - (count) => console.log(count) - ); + attachEffect(this.props.count, (count) => console.log(count)); } - afterViewInit(){ + afterViewInit() { attachEffect(this.props.count, (count) => console.log(count + 100)); } diff --git a/examples/demo/BooleanPropTest.mjs b/examples/demo/BooleanPropTest.mjs index 765e143..e10423d 100644 --- a/examples/demo/BooleanPropTest.mjs +++ b/examples/demo/BooleanPropTest.mjs @@ -1,4 +1,4 @@ -import { WebComponent } from "../../src/index.js" +import { WebComponent } from "../../src/index.js"; export class BooleanPropTest extends WebComponent { static properties = ["is-inline", "anotherone"]; diff --git a/examples/demo/Counter.mjs b/examples/demo/Counter.mjs index 8a4fb36..85a458a 100644 --- a/examples/demo/Counter.mjs +++ b/examples/demo/Counter.mjs @@ -1,10 +1,10 @@ // @ts-check -import { WebComponent, html } from "../../src/index.js" +import { WebComponent, html } from "../../src/index.js"; export class Counter extends WebComponent { static props = { - count: 0 - } + count: 0, + }; get template() { return html` `; diff --git a/examples/type-restore/Object.mjs b/examples/type-restore/Object.mjs index 83c39b5..f8b283a 100644 --- a/examples/type-restore/Object.mjs +++ b/examples/type-restore/Object.mjs @@ -1,43 +1,43 @@ -import { WebComponent } from "../../src/WebComponent.js"; +import { WebComponent } from "../../src/index.js"; export class ObjectText extends WebComponent { // static properties = ["object"]; static props = { object: { - hello: 'worldzz', - age: 2 - } - } + hello: "worldzz", + age: 2, + }, + }; onChanges() { - console.log('>>> object', this.props.object) + console.log(">>> object", this.props.object); } get template() { - const greeting = document.createElement('textarea') + const greeting = document.createElement("textarea"); greeting.innerHTML = this.props.object.hello; - greeting.setAttribute('id', 'greeting-field'); - const greetingLabel = document.createElement('label'); - greetingLabel.setAttribute('for', 'greeting-field'); - greetingLabel.textContent = 'Hello'; + greeting.setAttribute("id", "greeting-field"); + const greetingLabel = document.createElement("label"); + greetingLabel.setAttribute("for", "greeting-field"); + greetingLabel.textContent = "Hello"; greeting.onkeyup = () => { this.props.object = { ...this.props.object, - hello: greeting.value + hello: greeting.value, }; - } - const ageField = document.createElement('input'); + }; + const ageField = document.createElement("input"); ageField.value = this.props.object.age; - ageField.setAttribute('id', 'age-field'); - const ageLabel = document.createElement('label') - ageLabel.setAttribute('for', 'age-field'); - ageLabel.textContent = 'Age' + ageField.setAttribute("id", "age-field"); + const ageLabel = document.createElement("label"); + ageLabel.setAttribute("for", "age-field"); + ageLabel.textContent = "Age"; ageField.onkeyup = () => { this.props.object = { ...this.props.object, - age: ageField.value - } - } - const form = document.createElement('form'); - form.append(greetingLabel, greeting, ageLabel, ageField) + age: ageField.value, + }; + }; + const form = document.createElement("form"); + form.append(greetingLabel, greeting, ageLabel, ageField); return form; } diff --git a/examples/type-restore/Toggle.mjs b/examples/type-restore/Toggle.mjs index e149339..960a616 100644 --- a/examples/type-restore/Toggle.mjs +++ b/examples/type-restore/Toggle.mjs @@ -1,17 +1,17 @@ // @ts-check -import { WebComponent } from "../../src/WebComponent.js"; +import { WebComponent } from "../../src/index.js"; export class Toggle extends WebComponent { static properties = ["toggle"]; onInit() { this.props.toggle = false; - this.onclick = ()=>this.handleToggle() + this.onclick = () => this.handleToggle(); } handleToggle() { - this.props.toggle = !this.props.toggle; + this.props.toggle = !this.props.toggle; } get template() { - return ``; + return ``; } } diff --git a/package-lock.json b/package-lock.json index 0cdf0e8..8db945a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,19 @@ { "name": "web-component-base", - "version": "2.0.0", + "version": "2.0.0-beta.21", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "web-component-base", - "version": "2.0.0", + "version": "2.0.0-beta.21", "license": "MIT", "workspaces": [ "site" ], "devDependencies": { "@size-limit/preset-small-lib": "^11.0.0", + "prettier": "^3.1.1", "typescript": "^5.2.2", "uglify-js": "^3.17.4" } @@ -3284,6 +3285,21 @@ "pathe": "^1.1.0" } }, + "node_modules/prettier": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.1.tgz", + "integrity": "sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", diff --git a/package.json b/package.json index 63e86bc..398de10 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "publish:patch:beta": "npm version patch && npm run pub:beta", "publish:minor": "npm version minor && npm run pub", "publish:minor:beta": "npm version minor && npm run pub:beta", - "check:size": "npm run build && size-limit ./dist/WebComponent.js" + "check:size": "npm run build && size-limit ./dist/WebComponent.js", + "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"" }, "repository": "https://github.com/ayoayco/web-component-base", "homepage": "https://WebComponent.io", @@ -58,6 +59,7 @@ }, "devDependencies": { "@size-limit/preset-small-lib": "^11.0.0", + "prettier": "^3.1.1", "typescript": "^5.2.2", "uglify-js": "^3.17.4" }, diff --git a/site/nitro.config.mjs b/site/nitro.config.mjs index 82a71b7..492ad0b 100644 --- a/site/nitro.config.mjs +++ b/site/nitro.config.mjs @@ -1 +1 @@ -export default defineNitroConfig({ extends: '@mcflyjs/config' }); +export default defineNitroConfig({ extends: "@mcflyjs/config" }); diff --git a/site/public/prism.js b/site/public/prism.js index 6adbc13..d61ed4d 100644 --- a/site/public/prism.js +++ b/site/public/prism.js @@ -1,7 +1,758 @@ /* PrismJS 1.29.0 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); -Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; -!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); -Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; -Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; +var _self = + "undefined" != typeof window + ? window + : "undefined" != typeof WorkerGlobalScope && + self instanceof WorkerGlobalScope + ? self + : {}, + Prism = (function (e) { + var n = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i, + t = 0, + r = {}, + a = { + manual: e.Prism && e.Prism.manual, + disableWorkerMessageHandler: + e.Prism && e.Prism.disableWorkerMessageHandler, + util: { + encode: function e(n) { + return n instanceof i + ? new i(n.type, e(n.content), n.alias) + : Array.isArray(n) + ? n.map(e) + : n + .replace(/&/g, "&") + .replace(/= g.reach); + A += w.value.length, w = w.next + ) { + var E = w.value; + if (n.length > e.length) return; + if (!(E instanceof i)) { + var P, + L = 1; + if (y) { + if (!(P = l(b, A, e, m)) || P.index >= e.length) break; + var S = P.index, + O = P.index + P[0].length, + j = A; + for (j += w.value.length; S >= j; ) + j += (w = w.next).value.length; + if (((A = j -= w.value.length), w.value instanceof i)) + continue; + for ( + var C = w; + C !== n.tail && (j < O || "string" == typeof C.value); + C = C.next + ) + L++, (j += C.value.length); + L--, (E = e.slice(A, j)), (P.index -= A); + } else if (!(P = l(b, 0, E, m))) continue; + S = P.index; + var N = P[0], + _ = E.slice(0, S), + M = E.slice(S + N.length), + W = A + E.length; + g && W > g.reach && (g.reach = W); + var z = w.prev; + if ( + (_ && ((z = u(n, z, _)), (A += _.length)), + c(n, z, L), + (w = u(n, z, new i(f, p ? a.tokenize(N, p) : N, k, N))), + M && u(n, w, M), + L > 1) + ) { + var I = { cause: f + "," + d, reach: W }; + o(e, n, t, w.prev, A, I), + g && I.reach > g.reach && (g.reach = I.reach); + } + } + } + } + } + } + function s() { + var e = { value: null, prev: null, next: null }, + n = { value: null, prev: e, next: null }; + (e.next = n), (this.head = e), (this.tail = n), (this.length = 0); + } + function u(e, n, t) { + var r = n.next, + a = { value: t, prev: n, next: r }; + return (n.next = a), (r.prev = a), e.length++, a; + } + function c(e, n, t) { + for (var r = n.next, a = 0; a < t && r !== e.tail; a++) r = r.next; + (n.next = r), (r.prev = n), (e.length -= a); + } + if ( + ((e.Prism = a), + (i.stringify = function e(n, t) { + if ("string" == typeof n) return n; + if (Array.isArray(n)) { + var r = ""; + return ( + n.forEach(function (n) { + r += e(n, t); + }), + r + ); + } + var i = { + type: n.type, + content: e(n.content, t), + tag: "span", + classes: ["token", n.type], + attributes: {}, + language: t, + }, + l = n.alias; + l && + (Array.isArray(l) + ? Array.prototype.push.apply(i.classes, l) + : i.classes.push(l)), + a.hooks.run("wrap", i); + var o = ""; + for (var s in i.attributes) + o += + " " + + s + + '="' + + (i.attributes[s] || "").replace(/"/g, """) + + '"'; + return ( + "<" + + i.tag + + ' class="' + + i.classes.join(" ") + + '"' + + o + + ">" + + i.content + + "" + ); + }), + !e.document) + ) + return e.addEventListener + ? (a.disableWorkerMessageHandler || + e.addEventListener( + "message", + function (n) { + var t = JSON.parse(n.data), + r = t.language, + i = t.code, + l = t.immediateClose; + e.postMessage(a.highlight(i, a.languages[r], r)), + l && e.close(); + }, + !1, + ), + a) + : a; + var g = a.util.currentScript(); + function f() { + a.manual || a.highlightAll(); + } + if ( + (g && + ((a.filename = g.src), + g.hasAttribute("data-manual") && (a.manual = !0)), + !a.manual) + ) { + var h = document.readyState; + "loading" === h || ("interactive" === h && g && g.defer) + ? document.addEventListener("DOMContentLoaded", f) + : window.requestAnimationFrame + ? window.requestAnimationFrame(f) + : window.setTimeout(f, 16); + } + return a; + })(_self); +"undefined" != typeof module && module.exports && (module.exports = Prism), + "undefined" != typeof global && (global.Prism = Prism); +(Prism.languages.markup = { + comment: { pattern: //, greedy: !0 }, + prolog: { pattern: /<\?[\s\S]+?\?>/, greedy: !0 }, + doctype: { + pattern: + /"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i, + greedy: !0, + inside: { + "internal-subset": { + pattern: /(^[^\[]*\[)[\s\S]+(?=\]>$)/, + lookbehind: !0, + greedy: !0, + inside: null, + }, + string: { pattern: /"[^"]*"|'[^']*'/, greedy: !0 }, + punctuation: /^$|[[\]]/, + "doctype-tag": /^DOCTYPE/i, + name: /[^\s<>'"]+/, + }, + }, + cdata: { pattern: //i, greedy: !0 }, + tag: { + pattern: + /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/, + greedy: !0, + inside: { + tag: { + pattern: /^<\/?[^\s>\/]+/, + inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ }, + }, + "special-attr": [], + "attr-value": { + pattern: /=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/, + inside: { + punctuation: [ + { pattern: /^=/, alias: "attr-equals" }, + { pattern: /^(\s*)["']|["']$/, lookbehind: !0 }, + ], + }, + }, + punctuation: /\/?>/, + "attr-name": { + pattern: /[^\s>\/]+/, + inside: { namespace: /^[^\s>\/:]+:/ }, + }, + }, + }, + entity: [ + { pattern: /&[\da-z]{1,8};/i, alias: "named-entity" }, + /&#x?[\da-f]{1,8};/i, + ], +}), + (Prism.languages.markup.tag.inside["attr-value"].inside.entity = + Prism.languages.markup.entity), + (Prism.languages.markup.doctype.inside["internal-subset"].inside = + Prism.languages.markup), + Prism.hooks.add("wrap", function (a) { + "entity" === a.type && + (a.attributes.title = a.content.replace(/&/, "&")); + }), + Object.defineProperty(Prism.languages.markup.tag, "addInlined", { + value: function (a, e) { + var s = {}; + (s["language-" + e] = { + pattern: /(^$)/i, + lookbehind: !0, + inside: Prism.languages[e], + }), + (s.cdata = /^$/i); + var t = { + "included-cdata": { pattern: //i, inside: s }, + }; + t["language-" + e] = { pattern: /[\s\S]+/, inside: Prism.languages[e] }; + var n = {}; + (n[a] = { + pattern: RegExp( + "(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace( + /__/g, + function () { + return a; + }, + ), + "i", + ), + lookbehind: !0, + greedy: !0, + inside: t, + }), + Prism.languages.insertBefore("markup", "cdata", n); + }, + }), + Object.defineProperty(Prism.languages.markup.tag, "addAttribute", { + value: function (a, e) { + Prism.languages.markup.tag.inside["special-attr"].push({ + pattern: RegExp( + "(^|[\"'\\s])(?:" + + a + + ")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))", + "i", + ), + lookbehind: !0, + inside: { + "attr-name": /^[^\s=]+/, + "attr-value": { + pattern: /=[\s\S]+/, + inside: { + value: { + pattern: /(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/, + lookbehind: !0, + alias: [e, "language-" + e], + inside: Prism.languages[e], + }, + punctuation: [{ pattern: /^=/, alias: "attr-equals" }, /"|'/], + }, + }, + }, + }); + }, + }), + (Prism.languages.html = Prism.languages.markup), + (Prism.languages.mathml = Prism.languages.markup), + (Prism.languages.svg = Prism.languages.markup), + (Prism.languages.xml = Prism.languages.extend("markup", {})), + (Prism.languages.ssml = Prism.languages.xml), + (Prism.languages.atom = Prism.languages.xml), + (Prism.languages.rss = Prism.languages.xml); +!(function (s) { + var e = + /(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/; + (s.languages.css = { + comment: /\/\*[\s\S]*?\*\//, + atrule: { + pattern: RegExp( + "@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|" + + e.source + + ")*?(?:;|(?=\\s*\\{))", + ), + inside: { + rule: /^@[\w-]+/, + "selector-function-argument": { + pattern: + /(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/, + lookbehind: !0, + alias: "selector", + }, + keyword: { + pattern: /(^|[^\w-])(?:and|not|only|or)(?![\w-])/, + lookbehind: !0, + }, + }, + }, + url: { + pattern: RegExp( + "\\burl\\((?:" + e.source + "|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)", + "i", + ), + greedy: !0, + inside: { + function: /^url/i, + punctuation: /^\(|\)$/, + string: { pattern: RegExp("^" + e.source + "$"), alias: "url" }, + }, + }, + selector: { + pattern: RegExp( + "(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|" + + e.source + + ")*(?=\\s*\\{)", + ), + lookbehind: !0, + }, + string: { pattern: e, greedy: !0 }, + property: { + pattern: + /(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i, + lookbehind: !0, + }, + important: /!important\b/i, + function: { pattern: /(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i, lookbehind: !0 }, + punctuation: /[(){};:,]/, + }), + (s.languages.css.atrule.inside.rest = s.languages.css); + var t = s.languages.markup; + t && (t.tag.addInlined("style", "css"), t.tag.addAttribute("style", "css")); +})(Prism); +Prism.languages.clike = { + comment: [ + { pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0, greedy: !0 }, + { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 }, + ], + string: { + pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, + greedy: !0, + }, + "class-name": { + pattern: + /(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i, + lookbehind: !0, + inside: { punctuation: /[.\\]/ }, + }, + keyword: + /\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/, + boolean: /\b(?:false|true)\b/, + function: /\b\w+(?=\()/, + number: /\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i, + operator: /[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/, + punctuation: /[{}[\];(),.:]/, +}; +(Prism.languages.javascript = Prism.languages.extend("clike", { + "class-name": [ + Prism.languages.clike["class-name"], + { + pattern: + /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/, + lookbehind: !0, + }, + ], + keyword: [ + { pattern: /((?:^|\})\s*)catch\b/, lookbehind: !0 }, + { + pattern: + /(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/, + lookbehind: !0, + }, + ], + function: + /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/, + number: { + pattern: RegExp( + "(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])", + ), + lookbehind: !0, + }, + operator: + /--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/, +})), + (Prism.languages.javascript["class-name"][0].pattern = + /(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/), + Prism.languages.insertBefore("javascript", "keyword", { + regex: { + pattern: RegExp( + "((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))", + ), + lookbehind: !0, + greedy: !0, + inside: { + "regex-source": { + pattern: /^(\/)[\s\S]+(?=\/[a-z]*$)/, + lookbehind: !0, + alias: "language-regex", + inside: Prism.languages.regex, + }, + "regex-delimiter": /^\/|\/$/, + "regex-flags": /^[a-z]+$/, + }, + }, + "function-variable": { + pattern: + /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/, + alias: "function", + }, + parameter: [ + { + pattern: + /(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/, + lookbehind: !0, + inside: Prism.languages.javascript, + }, + { + pattern: + /(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i, + lookbehind: !0, + inside: Prism.languages.javascript, + }, + { + pattern: + /(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/, + lookbehind: !0, + inside: Prism.languages.javascript, + }, + { + pattern: + /((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/, + lookbehind: !0, + inside: Prism.languages.javascript, + }, + ], + constant: /\b[A-Z](?:[A-Z_]|\dx?)*\b/, + }), + Prism.languages.insertBefore("javascript", "string", { + hashbang: { pattern: /^#!.*/, greedy: !0, alias: "comment" }, + "template-string": { + pattern: + /`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/, + greedy: !0, + inside: { + "template-punctuation": { pattern: /^`|`$/, alias: "string" }, + interpolation: { + pattern: + /((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/, + lookbehind: !0, + inside: { + "interpolation-punctuation": { + pattern: /^\$\{|\}$/, + alias: "punctuation", + }, + rest: Prism.languages.javascript, + }, + }, + string: /[\s\S]+/, + }, + }, + "string-property": { + pattern: + /((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m, + lookbehind: !0, + greedy: !0, + alias: "property", + }, + }), + Prism.languages.insertBefore("javascript", "operator", { + "literal-property": { + pattern: + /((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m, + lookbehind: !0, + alias: "property", + }, + }), + Prism.languages.markup && + (Prism.languages.markup.tag.addInlined("script", "javascript"), + Prism.languages.markup.tag.addAttribute( + "on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)", + "javascript", + )), + (Prism.languages.js = Prism.languages.javascript); diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js index 84c3d59..5de0849 100644 --- a/site/src/components/code-block.js +++ b/site/src/components/code-block.js @@ -26,12 +26,12 @@ class CodeBlockComponent extends HTMLElement { margin: "1em 0", fontSize: "large", overflow: "auto", - borderRadius: '5px' + borderRadius: "5px", }; if (inline) { - style.display = 'inline'; - style.padding = '0.25em 0.3em'; + style.display = "inline"; + style.padding = "0.25em 0.3em"; } Object.keys(style).forEach((rule) => { diff --git a/site/src/components/my-hello-world.js b/site/src/components/my-hello-world.js index 9444e76..c2c5a0c 100644 --- a/site/src/components/my-hello-world.js +++ b/site/src/components/my-hello-world.js @@ -9,11 +9,13 @@ class MyHelloWorld extends WebComponent { // Triggered when the component is connected to the DOM onInit() { let count = 0; - this.onclick = () => this.props.myName = `Clicked ${++count}x` + this.onclick = () => (this.props.myName = `Clicked ${++count}x`); } // give readonly template get template() { - return ``; + return ``; } } diff --git a/site/src/components/my-quote.js b/site/src/components/my-quote.js index 8c47beb..a40b01d 100644 --- a/site/src/components/my-quote.js +++ b/site/src/components/my-quote.js @@ -1,11 +1,11 @@ class MyQuote extends WebComponent { - static properties = ['type']; + static properties = ["type"]; /** * @type {HTMLElement} */ get wrapper() { - return this.querySelector('#wrapper'); + return this.querySelector("#wrapper"); } afterViewInit() { @@ -18,13 +18,12 @@ class MyQuote extends WebComponent { margin: "1em 0", fontSize: "large", overflow: "auto", - borderRadius: '5px' + borderRadius: "5px", }; Object.keys(style).forEach((rule) => { this.wrapper.style[rule] = style[rule]; }); - } get template() { diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js index 69f69c3..9bd45da 100644 --- a/site/src/components/vanilla-hello-world.js +++ b/site/src/components/vanilla-hello-world.js @@ -5,10 +5,10 @@ class HelloWorld extends HTMLElement { connectedCallback() { let count = 0; - const currentName = this.getAttribute('my-name'); + const currentName = this.getAttribute("my-name"); if (!currentName) { - this.setAttribute('my-name', 'World') + this.setAttribute("my-name", "World"); } this.onclick = () => this.setAttribute("my-name", `Clicked ${++count}x`); diff --git a/src/WebComponent.js b/src/WebComponent.js index 52f9dfd..2739415 100644 --- a/src/WebComponent.js +++ b/src/WebComponent.js @@ -1,4 +1,10 @@ -import { createElement, getKebabCase, getCamelCase, serialize, deserialize } from "./utils/index.js"; +import { + createElement, + getKebabCase, + getCamelCase, + serialize, + deserialize, +} from "./utils/index.js"; /** * A minimal base class to reduce the complexity of creating reactive custom elements @@ -69,20 +75,17 @@ export class WebComponent extends HTMLElement { */ onChanges(changes) {} - constructor() { + constructor() { super(); this.#initializeProps(); } static get observedAttributes() { - const propKeys = this.props ? Object.keys(this.props).map(camelCase => getKebabCase(camelCase)) : []; - - return [...( - new Set([ - ...this.properties, - ...propKeys - ]) - )] + const propKeys = this.props + ? Object.keys(this.props).map((camelCase) => getKebabCase(camelCase)) + : []; + + return [...new Set([...this.properties, ...propKeys])]; } connectedCallback() { @@ -135,7 +138,11 @@ export class WebComponent extends HTMLElement { } effectsMap[prop].push(value.callback); } else if (typeMap[prop] !== typeof value) { - throw TypeError(`Cannot assign ${typeof value} to ${typeMap[prop]} property (setting '${prop}' of ${meta.constructor.name})`) + throw TypeError( + `Cannot assign ${typeof value} to ${ + typeMap[prop] + } property (setting '${prop}' of ${meta.constructor.name})`, + ); } else if (oldValue !== value) { obj[prop] = value; effectsMap[prop]?.forEach((f) => f(value)); @@ -157,19 +164,19 @@ export class WebComponent extends HTMLElement { } #initializeProps() { - let initialProps = {} - if(this.constructor.props) { + let initialProps = {}; + if (this.constructor.props) { initialProps = this.constructor.props; - Object.keys(initialProps).forEach(camelCase => { - const value = initialProps[camelCase] - this.#typeMap[camelCase] = typeof value - this.setAttribute(getKebabCase(camelCase), serialize(value)) - }) + Object.keys(initialProps).forEach((camelCase) => { + const value = initialProps[camelCase]; + this.#typeMap[camelCase] = typeof value; + this.setAttribute(getKebabCase(camelCase), serialize(value)); + }); } if (!this.#props) { this.#props = new Proxy( initialProps, - this.#handler((key, value) => this.setAttribute(key, value), this) + this.#handler((key, value) => this.setAttribute(key, value), this), ); } } @@ -179,7 +186,7 @@ export class WebComponent extends HTMLElement { if (typeof this.template === "string") { this.innerHTML = this.template; return; - } else if (typeof this.template === 'object') { + } else if (typeof this.template === "object") { const tree = this.template; // TODO: smart diffing diff --git a/src/html.js b/src/html.js index 966955b..176ed54 100644 --- a/src/html.js +++ b/src/html.js @@ -2,10 +2,79 @@ * htm -- https://github.com/developit/htm * For license information please see ./vendors/htm/LICENSE.txt */ -const htm=(new Map,function(n){for(var e,l,s=arguments,t=1,u="",r="",o=[0],f=function(n){1===t&&(n||(u=u.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.push(n?s[n]:u):3===t&&(n||u)?(o[1]=n?s[n]:u,t=2):2===t&&"..."===u&&n?o[2]=Object.assign(o[2]||{},s[n]):2===t&&u&&!n?(o[2]=o[2]||{})[u]=!0:t>=5&&(5===t?((o[2]=o[2]||{})[l]=n?u?u+s[n]:s[n]:u,t=6):(n||u)&&(o[2][l]+=n?u+s[n]:u)),u=""},i=0;i"===e?(t=1,u=""):u=e+u[0]:r?e===r?r="":u+=e:'"'===e||"'"===e?r=e:">"===e?(f(),t=1):t&&("="===e?(t=5,l=u,u=""):"/"===e&&(t<5||">"===n[i][p+1])?(f(),3===t&&(o=o[0]),t=o,(o=o[0]).push(this.apply(null,t.slice(1))),t=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(f(),t=2):u+=e),3===t&&"!--"===u&&(t=4,o=o[0])}return f(),o.length>2?o.slice(1):o[1]}); +const htm = + (new Map(), + function (n) { + for ( + var e, + l, + s = arguments, + t = 1, + u = "", + r = "", + o = [0], + f = function (n) { + 1 === t && (n || (u = u.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) + ? o.push(n ? s[n] : u) + : 3 === t && (n || u) + ? ((o[1] = n ? s[n] : u), (t = 2)) + : 2 === t && "..." === u && n + ? (o[2] = Object.assign(o[2] || {}, s[n])) + : 2 === t && u && !n + ? ((o[2] = o[2] || {})[u] = !0) + : t >= 5 && + (5 === t + ? (((o[2] = o[2] || {})[l] = n + ? u + ? u + s[n] + : s[n] + : u), + (t = 6)) + : (n || u) && (o[2][l] += n ? u + s[n] : u)), + (u = ""); + }, + i = 0; + i < n.length; + i++ + ) { + i && (1 === t && f(), f(i)); + for (var p = 0; p < n[i].length; p++) + (e = n[i][p]), + 1 === t + ? "<" === e + ? (f(), (o = [o, "", null]), (t = 3)) + : (u += e) + : 4 === t + ? "--" === u && ">" === e + ? ((t = 1), (u = "")) + : (u = e + u[0]) + : r + ? e === r + ? (r = "") + : (u += e) + : '"' === e || "'" === e + ? (r = e) + : ">" === e + ? (f(), (t = 1)) + : t && + ("=" === e + ? ((t = 5), (l = u), (u = "")) + : "/" === e && (t < 5 || ">" === n[i][p + 1]) + ? (f(), + 3 === t && (o = o[0]), + (t = o), + (o = o[0]).push(this.apply(null, t.slice(1))), + (t = 0)) + : " " === e || "\t" === e || "\n" === e || "\r" === e + ? (f(), (t = 2)) + : (u += e)), + 3 === t && "!--" === u && ((t = 4), (o = o[0])); + } + return f(), o.length > 2 ? o.slice(1) : o[1]; + }); function h(type, props, ...children) { - return {type, props, children}; + return { type, props, children }; } export const html = htm.bind(h); diff --git a/src/utils/create-element.mjs b/src/utils/create-element.mjs index 5474b19..6205123 100644 --- a/src/utils/create-element.mjs +++ b/src/utils/create-element.mjs @@ -2,7 +2,7 @@ export function createElement(tree) { if (tree.type === undefined) { if (Array.isArray(tree)) { const frag = document.createDocumentFragment(); - frag.replaceChildren(...tree.map(leaf => createElement(leaf))) + frag.replaceChildren(...tree.map((leaf) => createElement(leaf))); return frag; } return document.createTextNode(tree); @@ -14,7 +14,7 @@ export function createElement(tree) { if (domProp in el) { el[domProp] = tree.props[prop]; } else { - el.setAttribute(prop, tree.props[prop]) + el.setAttribute(prop, tree.props[prop]); } }); } diff --git a/src/utils/get-kebab-case.mjs b/src/utils/get-kebab-case.mjs index 3b3a385..955f82a 100644 --- a/src/utils/get-kebab-case.mjs +++ b/src/utils/get-kebab-case.mjs @@ -1,6 +1,6 @@ export function getKebabCase(str) { return str.replace( /[A-Z]+(?![a-z])|[A-Z]/g, - ($, ofs) => (ofs ? "-" : "") + $.toLowerCase() + ($, ofs) => (ofs ? "-" : "") + $.toLowerCase(), ); } diff --git a/src/utils/index.js b/src/utils/index.js index 668224b..0a8dcb9 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -2,4 +2,4 @@ export { serialize } from "./serialize.mjs"; export { deserialize } from "./deserialize.mjs"; export { getCamelCase } from "./get-camel-case.mjs"; export { getKebabCase } from "./get-kebab-case.mjs"; -export {createElement} from "./create-element.mjs"; +export { createElement } from "./create-element.mjs"; diff --git a/src/web-component-base.js b/src/web-component-base.js deleted file mode 100644 index 633a685..0000000 --- a/src/web-component-base.js +++ /dev/null @@ -1,200 +0,0 @@ -import { createElement } from "./utils/create-element.mjs"; -import { getCamelCase } from "./utils/get-camel-case.mjs"; -import { getKebabCase } from "./utils/get-kebab-case.mjs"; -import { serialize } from "./utils/serialize.mjs"; - -/** - * A minimal base class to reduce the complexity of creating reactive custom elements - * @license MIT - * @author Ayo Ayco - * @see https://www.npmjs.com/package/web-component-base#readme - */ -export class WebComponent extends HTMLElement { - /** - * Array of strings that tells the browsers which attributes will cause a render - * @type {Array} - */ - static properties = []; - - /** - * Blueprint for the Proxy props - */ - static props; - - /** - * Read-only string property that represents how the component will be rendered - * @returns {string | Node | (string | Node)[]} - * @see https://www.npmjs.com/package/web-component-base#template-vs-render - */ - get template() { - return ""; - } - - /** - * Read-only property containing camelCase counterparts of observed attributes. - * @typedef {{[name: string]: any}} PropStringMap - * @see https://www.npmjs.com/package/web-component-base#prop-access - * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset - * @type {PropStringMap} - */ - get props() { - return this.#props; - } - - /** - * @type {PropStringMap} - */ - #props; - - /** - * Triggered after view is initialized - */ - afterViewInit() {} - - /** - * Triggered when the component is connected to the DOM - */ - onInit() {} - - /** - * Triggered when the component is disconnected from the DOM - */ - onDestroy() {} - - /** - * Triggered when an attribute value changes - * @typedef {{ - * property: string, - * previousValue: any, - * currentValue: any - * }} Changes - * @param {Changes} changes - */ - onChanges(changes) {} - - constructor() { - super(); - this.#initializeProps(); - } - - static get observedAttributes() { - const propKeys = this.props ? Object.keys(this.props).map(camelCase => getKebabCase(camelCase)) : []; - - return [...( - new Set([ - ...this.properties, - ...propKeys - ]) - )] - } - - connectedCallback() { - this.onInit(); - this.render(); - this.afterViewInit(); - } - - disconnectedCallback() { - this.onDestroy(); - } - - attributeChangedCallback(property, previousValue, currentValue) { - const camelCaps = getCamelCase(property); - - if (previousValue !== currentValue) { - this[property] = currentValue === "" || currentValue; - this[camelCaps] = this[property]; - - this.#handleUpdateProp(camelCaps, this[property]); - - this.render(); - this.onChanges({ property, previousValue, currentValue }); - } - } - - #handleUpdateProp(key, stringifiedValue) { - const restored = deserialize(stringifiedValue, this.#typeMap[key]); - if (restored !== this.props[key]) this.props[key] = restored; - } - - #typeMap = {}; - #effectsMap = {}; - - #handler(setter, meta) { - const effectsMap = meta.#effectsMap; - const typeMap = meta.#typeMap; - - return { - set(obj, prop, value) { - const oldValue = obj[prop]; - - if (!(prop in typeMap)) { - typeMap[prop] = typeof value; - } - - if (value.attach === "effect") { - if (!effectsMap[prop]) { - effectsMap[prop] = []; - } - effectsMap[prop].push(value.callback); - } else if (typeMap[prop] !== typeof value) { - throw TypeError(`Cannot assign ${typeof value} to ${typeMap[prop]} property (setting '${prop}' of ${meta.constructor.name})`) - } else if (oldValue !== value) { - obj[prop] = value; - effectsMap[prop]?.forEach((f) => f(value)); - const kebab = getKebabCase(prop); - setter(kebab, serialize(value)); - } - - return true; - }, - get(obj, prop) { - // TODO: handle non-objects - if (obj[prop] !== null && obj[prop] !== undefined) { - Object.getPrototypeOf(obj[prop]).proxy = meta.#props; - Object.getPrototypeOf(obj[prop]).prop = prop; - } - return obj[prop]; - }, - }; - } - - #initializeProps() { - let initialProps = {} - if(this.constructor.props) { - initialProps = this.constructor.props; - Object.keys(initialProps).forEach(camelCase => { - const value = initialProps[camelCase] - this.#typeMap[camelCase] = typeof value - this.setAttribute(getKebabCase(camelCase), serialize(value)) - }) - } - if (!this.#props) { - this.#props = new Proxy( - initialProps, - this.#handler((key, value) => this.setAttribute(key, value), this) - ); - } - } - - #prevDOM; - render() { - if (typeof this.template === "string") { - this.innerHTML = this.template; - return; - } else if (typeof this.template === 'object') { - const tree = this.template; - - // TODO: smart diffing - if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) { - // render - const el = createElement(tree); - if (el) { - if (Array.isArray(el)) this.replaceChildren(...el); - else this.replaceChildren(el); - } - this.#prevDOM = tree; - } - } - } -} diff --git a/tsconfig.json b/tsconfig.json index f08a9e9..618fa34 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,3 @@ - { "compilerOptions": { "allowJs": true, @@ -6,8 +5,5 @@ "declaration": true, "emitDeclarationOnly": true }, - "include": [ - "src/*", - "src/utils/*" - ], + "include": ["src/*", "src/utils/*"] } From 42875688d2ab2b74f30644e3026fb036fbb9b283 Mon Sep 17 00:00:00 2001 From: Ayo Date: Sun, 10 Dec 2023 18:20:20 +0100 Subject: [PATCH 2/2] chore: use eslint; bump to major --- package-lock.json | 183 +++++++++++++++++++++++----------------------- package.json | 8 +- 2 files changed, 96 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8db945a..dcdb6a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ ], "devDependencies": { "@size-limit/preset-small-lib": "^11.0.0", + "esbuild": "^0.19.9", "prettier": "^3.1.1", "typescript": "^5.2.2", "uglify-js": "^3.17.4" @@ -27,9 +28,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.7.tgz", - "integrity": "sha512-YGSPnndkcLo4PmVl2tKatEn+0mlVMr3yEpOOT0BeMria87PhvoJb5dg5f5Ft9fbCVgtAz4pWMzZVgSEGpDAlww==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz", + "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==", "cpu": [ "arm" ], @@ -42,9 +43,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.7.tgz", - "integrity": "sha512-YEDcw5IT7hW3sFKZBkCAQaOCJQLONVcD4bOyTXMZz5fr66pTHnAet46XAtbXAkJRfIn2YVhdC6R9g4xa27jQ1w==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz", + "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==", "cpu": [ "arm64" ], @@ -57,9 +58,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.7.tgz", - "integrity": "sha512-jhINx8DEjz68cChFvM72YzrqfwJuFbfvSxZAk4bebpngGfNNRm+zRl4rtT9oAX6N9b6gBcFaJHFew5Blf6CvUw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz", + "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==", "cpu": [ "x64" ], @@ -72,9 +73,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.7.tgz", - "integrity": "sha512-dr81gbmWN//3ZnBIm6YNCl4p3pjnabg1/ZVOgz2fJoUO1a3mq9WQ/1iuEluMs7mCL+Zwv7AY5e3g1hjXqQZ9Iw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz", + "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==", "cpu": [ "arm64" ], @@ -87,9 +88,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.7.tgz", - "integrity": "sha512-Lc0q5HouGlzQEwLkgEKnWcSazqr9l9OdV2HhVasWJzLKeOt0PLhHaUHuzb8s/UIya38DJDoUm74GToZ6Wc7NGQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz", + "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==", "cpu": [ "x64" ], @@ -102,9 +103,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.7.tgz", - "integrity": "sha512-+y2YsUr0CxDFF7GWiegWjGtTUF6gac2zFasfFkRJPkMAuMy9O7+2EH550VlqVdpEEchWMynkdhC9ZjtnMiHImQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz", + "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==", "cpu": [ "arm64" ], @@ -117,9 +118,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.7.tgz", - "integrity": "sha512-CdXOxIbIzPJmJhrpmJTLx+o35NoiKBIgOvmvT+jeSadYiWJn0vFKsl+0bSG/5lwjNHoIDEyMYc/GAPR9jxusTA==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz", + "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==", "cpu": [ "x64" ], @@ -132,9 +133,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.7.tgz", - "integrity": "sha512-Y+SCmWxsJOdQtjcBxoacn/pGW9HDZpwsoof0ttL+2vGcHokFlfqV666JpfLCSP2xLxFpF1lj7T3Ox3sr95YXww==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz", + "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==", "cpu": [ "arm" ], @@ -147,9 +148,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.7.tgz", - "integrity": "sha512-inHqdOVCkUhHNvuQPT1oCB7cWz9qQ/Cz46xmVe0b7UXcuIJU3166aqSunsqkgSGMtUCWOZw3+KMwI6otINuC9g==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz", + "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==", "cpu": [ "arm64" ], @@ -162,9 +163,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.7.tgz", - "integrity": "sha512-2BbiL7nLS5ZO96bxTQkdO0euGZIUQEUXMTrqLxKUmk/Y5pmrWU84f+CMJpM8+EHaBPfFSPnomEaQiG/+Gmh61g==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz", + "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==", "cpu": [ "ia32" ], @@ -177,9 +178,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.7.tgz", - "integrity": "sha512-BVFQla72KXv3yyTFCQXF7MORvpTo4uTA8FVFgmwVrqbB/4DsBFWilUm1i2Oq6zN36DOZKSVUTb16jbjedhfSHw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz", + "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==", "cpu": [ "loong64" ], @@ -192,9 +193,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.7.tgz", - "integrity": "sha512-DzAYckIaK+pS31Q/rGpvUKu7M+5/t+jI+cdleDgUwbU7KdG2eC3SUbZHlo6Q4P1CfVKZ1lUERRFP8+q0ob9i2w==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz", + "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==", "cpu": [ "mips64el" ], @@ -207,9 +208,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.7.tgz", - "integrity": "sha512-JQ1p0SmUteNdUaaiRtyS59GkkfTW0Edo+e0O2sihnY4FoZLz5glpWUQEKMSzMhA430ctkylkS7+vn8ziuhUugQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz", + "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==", "cpu": [ "ppc64" ], @@ -222,9 +223,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.7.tgz", - "integrity": "sha512-xGwVJ7eGhkprY/nB7L7MXysHduqjpzUl40+XoYDGC4UPLbnG+gsyS1wQPJ9lFPcxYAaDXbdRXd1ACs9AE9lxuw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz", + "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==", "cpu": [ "riscv64" ], @@ -237,9 +238,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.7.tgz", - "integrity": "sha512-U8Rhki5PVU0L0nvk+E8FjkV8r4Lh4hVEb9duR6Zl21eIEYEwXz8RScj4LZWA2i3V70V4UHVgiqMpszXvG0Yqhg==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz", + "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==", "cpu": [ "s390x" ], @@ -252,9 +253,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.7.tgz", - "integrity": "sha512-ZYZopyLhm4mcoZXjFt25itRlocKlcazDVkB4AhioiL9hOWhDldU9n38g62fhOI4Pth6vp+Mrd5rFKxD0/S+7aQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz", + "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==", "cpu": [ "x64" ], @@ -267,9 +268,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.7.tgz", - "integrity": "sha512-/yfjlsYmT1O3cum3J6cmGG16Fd5tqKMcg5D+sBYLaOQExheAJhqr8xOAEIuLo8JYkevmjM5zFD9rVs3VBcsjtQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz", + "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==", "cpu": [ "x64" ], @@ -282,9 +283,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.7.tgz", - "integrity": "sha512-MYDFyV0EW1cTP46IgUJ38OnEY5TaXxjoDmwiTXPjezahQgZd+j3T55Ht8/Q9YXBM0+T9HJygrSRGV5QNF/YVDQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz", + "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==", "cpu": [ "x64" ], @@ -297,9 +298,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.7.tgz", - "integrity": "sha512-JcPvgzf2NN/y6X3UUSqP6jSS06V0DZAV/8q0PjsZyGSXsIGcG110XsdmuWiHM+pno7/mJF6fjH5/vhUz/vA9fw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz", + "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==", "cpu": [ "x64" ], @@ -312,9 +313,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.7.tgz", - "integrity": "sha512-ZA0KSYti5w5toax5FpmfcAgu3ZNJxYSRm0AW/Dao5up0YV1hDVof1NvwLomjEN+3/GMtaWDI+CIyJOMTRSTdMw==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz", + "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==", "cpu": [ "arm64" ], @@ -327,9 +328,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.7.tgz", - "integrity": "sha512-CTOnijBKc5Jpk6/W9hQMMvJnsSYRYgveN6O75DTACCY18RA2nqka8dTZR+x/JqXCRiKk84+5+bRKXUSbbwsS0A==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz", + "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==", "cpu": [ "ia32" ], @@ -342,9 +343,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.7.tgz", - "integrity": "sha512-gRaP2sk6hc98N734luX4VpF318l3w+ofrtTu9j5L8EQXF+FzQKV6alCOHMVoJJHvVK/mGbwBXfOL1HETQu9IGQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz", + "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==", "cpu": [ "x64" ], @@ -1914,9 +1915,9 @@ } }, "node_modules/esbuild": { - "version": "0.19.7", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.7.tgz", - "integrity": "sha512-6brbTZVqxhqgbpqBR5MzErImcpA0SQdoKOkcWK/U30HtQxnokIpG3TX2r0IJqbFUzqLjhU/zC1S5ndgakObVCQ==", + "version": "0.19.9", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz", + "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==", "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -1925,28 +1926,28 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/android-arm": "0.19.7", - "@esbuild/android-arm64": "0.19.7", - "@esbuild/android-x64": "0.19.7", - "@esbuild/darwin-arm64": "0.19.7", - "@esbuild/darwin-x64": "0.19.7", - "@esbuild/freebsd-arm64": "0.19.7", - "@esbuild/freebsd-x64": "0.19.7", - "@esbuild/linux-arm": "0.19.7", - "@esbuild/linux-arm64": "0.19.7", - "@esbuild/linux-ia32": "0.19.7", - "@esbuild/linux-loong64": "0.19.7", - "@esbuild/linux-mips64el": "0.19.7", - "@esbuild/linux-ppc64": "0.19.7", - "@esbuild/linux-riscv64": "0.19.7", - "@esbuild/linux-s390x": "0.19.7", - "@esbuild/linux-x64": "0.19.7", - "@esbuild/netbsd-x64": "0.19.7", - "@esbuild/openbsd-x64": "0.19.7", - "@esbuild/sunos-x64": "0.19.7", - "@esbuild/win32-arm64": "0.19.7", - "@esbuild/win32-ia32": "0.19.7", - "@esbuild/win32-x64": "0.19.7" + "@esbuild/android-arm": "0.19.9", + "@esbuild/android-arm64": "0.19.9", + "@esbuild/android-x64": "0.19.9", + "@esbuild/darwin-arm64": "0.19.9", + "@esbuild/darwin-x64": "0.19.9", + "@esbuild/freebsd-arm64": "0.19.9", + "@esbuild/freebsd-x64": "0.19.9", + "@esbuild/linux-arm": "0.19.9", + "@esbuild/linux-arm64": "0.19.9", + "@esbuild/linux-ia32": "0.19.9", + "@esbuild/linux-loong64": "0.19.9", + "@esbuild/linux-mips64el": "0.19.9", + "@esbuild/linux-ppc64": "0.19.9", + "@esbuild/linux-riscv64": "0.19.9", + "@esbuild/linux-s390x": "0.19.9", + "@esbuild/linux-x64": "0.19.9", + "@esbuild/netbsd-x64": "0.19.9", + "@esbuild/openbsd-x64": "0.19.9", + "@esbuild/sunos-x64": "0.19.9", + "@esbuild/win32-arm64": "0.19.9", + "@esbuild/win32-ia32": "0.19.9", + "@esbuild/win32-x64": "0.19.9" } }, "node_modules/escalade": { diff --git a/package.json b/package.json index 398de10..b86c378 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-component-base", - "version": "2.0.0-beta.21", + "version": "2.0.0", "description": "A zero-dependency, ~600 Bytes (minified & gzipped), JS base class for creating reactive custom elements easily", "type": "module", "exports": { @@ -30,11 +30,10 @@ "start": "npx simple-server .", "demo": "npx simple-server .", "site": "npm start -w site", - "build": "npm run clean && tsc && npm run copy:meta && npm run copy:source && npm run minify", + "build": "npm run clean && tsc && npm run copy:meta && npm run copy:source", "clean": "rm -rf dist", - "minify": "npx uglifyjs ./dist/WebComponent.js -o ./dist/WebComponent.min.js", "copy:meta": "node prepare.js && cp README.md ./dist && cp LICENSE ./dist", - "copy:source": "cp -r ./src/* ./dist", + "copy:source": "esbuild --minify --bundle ./src/*.js ./src/utils/* --outdir=\"./dist\" --format=\"esm\"", "pub": "npm run clean && npm run build && cd ./dist && npm publish", "pub:beta": "npm run clean && npm run build && cd ./dist && npm publish --tag beta", "publish:patch": "npm version patch && npm run pub", @@ -59,6 +58,7 @@ }, "devDependencies": { "@size-limit/preset-small-lib": "^11.0.0", + "esbuild": "^0.19.9", "prettier": "^3.1.1", "typescript": "^5.2.2", "uglify-js": "^3.17.4"