diff --git a/README.md b/README.md index 094d5d7..599932e 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@

Temple

-

The reactive web component template engine.

+

The reactive web component template engine



- Documentation + Documentation
diff --git a/docs/500.html b/docs/500.html index a4abae8..122041f 100644 --- a/docs/500.html +++ b/docs/500.html @@ -17,21 +17,25 @@ - + + + - + - + + + - + - +
Temple Logo -

+

Temple

@@ -47,18 +51,18 @@

-

 - +
 +

Oops...

Something went wrong. Please try again later. - 
Unknown Error
+ 
Document must start with an <html> tag.
- +
\ No newline at end of file diff --git a/docs/build/client/418e9942884d4639bd82.css b/docs/build/client/418e9942884d4639bd82.css new file mode 100644 index 0000000..1ba07b1 --- /dev/null +++ b/docs/build/client/418e9942884d4639bd82.css @@ -0,0 +1,4 @@ +:root{--black:#000000;--white:#FFFFFF;--info:#1474FC;--error:#DC3545;--warning:#FF7B07;--success:#28A745;--muted:#999999}.light{--bg-0:#EFEFEF;--bg-1:#CFCFCF;--bg-2:#AFAFAF;--bg-3:#8F8F8F;--bg-4:#6F6F6F;--bd-0:#EFEFEF;--bd-1:#CFCFCF;--bd-2:#AFAFAF;--bd-3:#8F8F8F;--bd-4:#6F6F6F;--bg-inverse:#242424;--tx-0:#000000;--tx-1:#242424;--tx-inverse:#CFCFCF}.dark{--bg-0:#121212;--bg-1:#222222;--bg-2:#323232;--bg-3:#424242;--bg-4:#525252;--bd-0:#121212;--bd-1:#222222;--bd-2:#323232;--bd-3:#424242;--bd-4:#525252;--bg-inverse:#DBDBDB;--tx-0:#FFFFFF;--tx-1:#CFCFCF;--tx-inverse:#222222} + html, body{height:100%;margin:0;padding:0;width:100%}h1, h2, h3, h4, h5, h6, p{margin:0;padding:0}a{text-decoration:none} + + .top-0{top:0px}.right-0{right:0px}.h-60{height:60px}.left-0{left:0px}.left-226{left:226px}.bottom-0{bottom:0px}.w-226{width:226px}.w-200{width:200px}.bottom-60{bottom:60px}.top-60{top:60px}.right-200{right:200px}.gap-10{gap:10px}.p-10{padding:10px}.tx-16{font-size:16px}.h-10{height:10px}.w-10{width:10px}.px-20{padding-left:20px;padding-right:20px}.py-15{padding-top:15px;padding-bottom:15px}.m-0{margin:0px}.h-26{height:26px}.mr-10{margin-right:10px}.ml-10{margin-left:10px}.ml-5{margin-left:5px}.p-5{padding:5px}.py-40{padding-top:40px;padding-bottom:40px}.h-100{height:100px}.tx-40{font-size:40px}.tx-30{font-size:30px}.py-30{padding-top:30px;padding-bottom:30px}.tx-lh-36{line-height:36px}.mw-960{max-width:960px}.p-20{padding:20px}.tx-18{font-size:18px}.p-0{padding:0px}.mw-300{max-width:300px}.mb-20{margin-bottom:20px}.tx-lh-24{line-height:24px}.mt-40{margin-top:40px}.by-0{border-top-width:0px;border-bottom-width:0px}.bl-1{border-left-width:1px}.br-0{border-right-width:0px}.mb-0{margin-bottom:0px}.tx-26{font-size:26px}.transition-500{transition-duration:500ms}.shadow-0-0-10-0-0-0-5{box-shadow:0px 0px 10px rgb(0, 0, 0, 0.05)}.bg-t-1{background-color:var(--bg-1)}.bg-h-999999{background-color:#999999}.tx-t-1{color:var(--tx-1)}.bg-h-cb3837{background-color:#cb3837}.bg-h-7289da{background-color:#7289da}.b-t-1{border-color:var(--bd-1)}.bg-h-cccccc{background-color:#cccccc}.tx-h-242424{color:#242424}.bg-t-0{background-color:var(--bg-0)}.none{display:none}.block{display:block}.flex{display:flex}.inline{display:inline}.inline-block{display:inline-block}.transparent{opacity:0}.hidden{visibility:hidden}.relative{position:relative}.absolute{position:absolute}.static{position:static}.flex-grow{flex-grow:1}.flex-center{align-items:center;justify-content:center}.flex-center-y{align-items:center}.flex-wrap{flex-wrap:wrap}.scroll{overflow:scroll}.scroll-auto{overflow:auto}.scroll-hidden{overflow:hidden}.vh{height:100vh}.tx-center{text-align:center}.tx-arial{font-family:Arial, sans-serif}.tx-upper{text-transform:uppercase}.b-solid{border-style:solid}.curved{border-radius:4px}.rounded{border-radius:12px}.pill{border-radius:10000px}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.list-none{list-style:none}.bg-black{background-color:var(--black) !important}.bg-white{background-color:var(--white) !important}.basis-half{flex-basis:50%}.basis-third{flex-basis:33.33%}.h-full{height:100%}.w-full{width:100%}.w-third{width:33.33%}.tx-black{color:var(--black) !important}.tx-white{color:var(--white) !important}.tx-lg{font-size:16px}.tx-5xl{font-size:26px}@media (max-width:992px){.lg-right--200{right:-200px}.lg-right-0{right:0px}.lg-right-200{right:200px}.lg-basis-half{flex-basis:50%}}@media (max-width:767px){.md-left-0{left:0px}.md-left-226{left:226px}.md-left--226{left:-226px}.md-mw-400{max-width:400px}.md-mt-20{margin-top:20px}.md-b-0{border-width:0px}.md-block{display:block}.md-w-auto{width:auto}.md-m-auto{margin:auto}}@media (max-width:420px){.sm-block{display:block}} \ No newline at end of file diff --git a/docs/build/client/418e9942884d4639bd82.html b/docs/build/client/418e9942884d4639bd82.html new file mode 100644 index 0000000..920cc10 --- /dev/null +++ b/docs/build/client/418e9942884d4639bd82.html @@ -0,0 +1,324 @@ + + + + + + Temple - The reactive web component template engine. + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + Temple Logo + +

+ Temple +

+ + +
+
+
+ Temple Logo +

Temple

+ + The reactive web component template engine. + + + Get Started + + + Read the Docs + +
+
+ + Temple is a modern HTML markup language and a server first + template engine with a built-in parser/compiler that + generates web components and supports reactivity. + + +
+ + <style> + h1 { font-weight: bold; } + </style> + <script> + const name = 'world'; + </script> + <h1>Hello {name}!</h1> + + +
+

Hello world!

+
+ +
+ +
+
+
    +
  • +
    +

    + Expressive Markup +

    + + Any data type as attributes. Easily express logic with + markup directives like if, each, and try catch. + +
    +
    • +
  • +
    +

    + Reactive Signals +

    + + Easily transition from backend logic to reactive states. + No Hydration and no memoization needed. + +
    +
    • +
  • +
    +

    + Bare Metal +

    + + Work with the DOM directly. Import any web components + from any source. Works with Lit, HTMX. + +
    +
    • +
+
+
+

+ Server Setup +

+ + Temple can be used with popular server + frameworks in just a few lines of code. + + + + import temple from '@ossph/temple/compiler'; + //make a temple compiler + const compiler = temple(); + //render HTML + const results = compiler.render('./page.dtml'); + + + +

+ Props +

+ + Import your component props and use immediately + + +
+ + <style> + h1 { font-weight: bold; } + </style> + <script> + import { props } from '@ossph/temple'; + const { name } = props(); + </script> + <h1>Hello {name}!</h1> + + +
+

Hello world!

+
+ +
+ + +

+ Reactive Signals +

+ + Use signals to manage state changes and re-renders. + + +
+ + <style> + h1 { font-weight: bold; } + </style> + <script> + import { signal } from '@ossph/temple'; + const name = signal('world'); + name.value += '!'; + </script> + <h1>Hello {name.value}</h1> + + +
+

Hello world!

+
+ +
+ + +

+ Components and Templates +

+ + Import components and templates for reusability. + + +
+ + <!-- page.html --> + <link rel="import" href="./my-heading.html" /> + <script> + const name = 'world'; + </script> + <my-heading {name}>Hello</my-heading> + + + <!-- my-heading.html --> + <script> + import { props } from '@ossph/temple'; + const { name, children } = props(); + </script> + <h1>{children} {name}</h1> + +
+ + +

+ Conditionals and Iterations +

+ + Case for conditions and iterations in an expressive way. + + +
+ + <script> + const name = 'world'; + const show = name === "world"; + </script> + + <if true=show> + <h1>Hello {name}</h1> + </if> + + + <script> + const list = [ 'a', 'b', 'c' ]; + </script> + <ul> + <each key=i value=item from=list> + <li>{i}: {item}</li> + </each> + </ul> + +
+ +
+
+

+ Works With Popular Server Frameworks +

+
+ + Express + + + Fastify + + + Hapi + + + Koa + + + NestJS + + + Restify + +
+
+
+

+ Temple Loves Developers! +

+
+ +

Im a vue developer. No need for this. OSSPH does not support this project.

+ + +

Temple? Never heard of it...
"The Name..."

+ + +

Temple is good news for Node developers. I'm a rust developer so it don't matter to me.

+ + +

Temple copied this section from us. We are the original.

+ + +

After creating the Temple project, I am really excited to get back to ReactJS.

+ + +

Temple? no thanks. Keep your stack front end. App router for life.

+ +
+
+
+

+ What are you waiting for? +

+ + Get Started + + + Read the Docs + +
+
+ + + \ No newline at end of file diff --git a/docs/build/client/418e9942884d4639bd82.js b/docs/build/client/418e9942884d4639bd82.js new file mode 100644 index 0000000..a8c9c41 --- /dev/null +++ b/docs/build/client/418e9942884d4639bd82.js @@ -0,0 +1,3801 @@ +var TempleAPI = (() => { + var __create = Object.create; + var __defProp = Object.defineProperty; + var __getOwnPropDesc = Object.getOwnPropertyDescriptor; + var __getOwnPropNames = Object.getOwnPropertyNames; + var __getProtoOf = Object.getPrototypeOf; + var __hasOwnProp = Object.prototype.hasOwnProperty; + var __commonJS = (cb, mod) => function __require() { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + }; + var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); + }; + var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; + }; + var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( + // If the importer is in node compatibility mode or this is not an ESM + // file that has been converted to a CommonJS file using a Babel- + // compatible transform (i.e. "__esModule" has not been set), then set + // "default" to the CommonJS "module.exports" for node compatibility. + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod + )); + var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + + // ../../node_modules/@ossph/temple/dist/Exception.js + var require_Exception = __commonJS({ + "../../node_modules/@ossph/temple/dist/Exception.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleException2 = class extends Error { + static for(message, ...values) { + values.forEach(function(value) { + message = message.replace("%s", value); + }); + return new this(message); + } + static forErrorsFound(errors) { + const exception = new this("Invalid Parameters"); + exception.errors = errors; + return exception; + } + static require(condition, message, ...values) { + if (!condition) { + for (const value of values) { + message = message.replace("%s", value); + } + throw new this(message); + } + } + constructor(message, code = 500) { + super(); + this.errors = {}; + this.start = 0; + this.end = 0; + this.message = message; + this.name = this.constructor.name; + this.code = code; + } + withCode(code) { + this.code = code; + return this; + } + withPosition(start, end) { + this.start = start; + this.end = end; + return this; + } + toJSON() { + return { + error: true, + code: this.code, + message: this.message + }; + } + }; + exports.default = TempleException2; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleEmitter.js + var require_TempleEmitter = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleEmitter.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.match = exports.TempleEmitter = exports.events = void 0; + exports.bindAttribute = bindAttribute; + exports.unbindAttribute = unbindAttribute; + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + exports.events = [ + "click", + "dblclick", + "mousedown", + "mouseup", + "mousemove", + "mouseover", + "mouseout", + "wheel", + "keydown", + "keypress", + "keyup", + "blur", + "change", + "contextmenu", + "focus", + "input", + "submit", + "invalid", + "reset", + "search", + "select", + "copy", + "cut", + "paste", + "drag", + "dragstart", + "dragend", + "dragover", + "dragenter", + "dragleave", + "drop", + "scroll", + "durationchange", + "ended", + "error", + "loadeddata", + "loadedmetadata", + "loadstart", + "pause", + "play", + "playing", + "progress", + "ratechange", + "seeked", + "seeking", + "stalled", + "suspend", + "timeupdate", + "volumechange", + "waiting", + "animationstart", + "animationend", + "animationiteration", + "transitionend", + "toggle" + ]; + var TempleEmitter = class extends EventTarget { + emit(event, target) { + this.dispatchEvent(new CustomEvent(event, { detail: target })); + return this; + } + on(event, callback) { + if (event === "ready") { + if (document.readyState !== "loading") { + const event2 = new CustomEvent("ready"); + setTimeout(() => callback(event2), 1); + return this; + } + } + this.addEventListener(event, callback); + return this; + } + once(event, callback) { + const unbinder = (e) => { + this.unbind(event, unbinder); + callback(e); + }; + this.on(event, unbinder); + return this; + } + unbind(event, callback) { + this.removeEventListener(event, callback); + return this; + } + }; + exports.TempleEmitter = TempleEmitter; + var match = (element, attribute, bind = true) => { + return Array.from(element.querySelectorAll("*")).filter((element2) => { + const node = TempleRegistry_1.default.get(element2); + const matched = node && node.hasAttribute(attribute) && (!bind || !node.hasEvent(attribute)); + if (matched) { + node.addEvent(attribute); + } + return matched; + }).map((element2) => TempleRegistry_1.default.get(element2)); + }; + exports.match = match; + function bindAttribute(name, bind) { + emitter2.on("mounted", (e) => { + if (!e.detail) + return; + const element = e.detail; + (0, exports.match)(element.shadowRoot || element, name).forEach(bind); + }); + } + function unbindAttribute(name, bind) { + emitter2.on("unmounted", (e) => { + if (!e.detail) + return; + const element = e.detail; + (0, exports.match)(element.shadowRoot || element, name, false).forEach(bind); + }); + } + var emitter2 = new TempleEmitter(); + exports.default = (() => { + document.onreadystatechange = () => { + if (document.readyState !== "loading") { + emitter2.emit("ready"); + } + }; + bindAttribute("mount", (element) => { + const callback = element.getAttribute("mount"); + if (typeof callback === "function") { + const event = new CustomEvent("mount", { + detail: { + node: element, + target: element.element + } + }); + callback(event); + } + }); + unbindAttribute("unmount", (element) => { + const callback = element.getAttribute("unmount"); + if (typeof callback === "function") { + const event = new CustomEvent("unmount", { + detail: { + node: element, + target: element.element + } + }); + callback(event); + } + }); + bindAttribute("if", (element) => { + const condition = element.getAttribute("if"); + if (condition === false || condition === "false") { + element.element.remove(); + } else if (typeof condition === "function" && !condition()) { + element.element.remove(); + } + }); + exports.events.forEach((event) => { + bindAttribute(event, (element) => { + const callback = element.getAttribute(event); + if (typeof callback === "function") { + element.element.removeEventListener(event, callback); + element.element.addEventListener(event, callback); + } + }); + unbindAttribute(event, (element) => { + const callback = element.getAttribute(event); + if (typeof callback === "function") { + element.element.removeEventListener(event, callback); + } + }); + }); + return emitter2; + })(); + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleElement.js + var require_TempleElement = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleElement.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleEmitter_1 = __importDefault(require_TempleEmitter()); + var TempleElement = class _TempleElement { + get attributes() { + return Object.assign({}, this._attributes); + } + get element() { + return this._element; + } + get events() { + return this._events; + } + constructor(element, attributes) { + this._events = /* @__PURE__ */ new Set(); + this._element = element; + this._attributes = attributes; + } + addEvent(event) { + this._events.add(event); + return this; + } + camel() { + return Object.fromEntries(Object.entries(this._attributes).map(([key, value]) => { + if (key === "class") { + return ["className", value]; + } + const camel = key.replace(/-([a-z])/g, (_2, letter) => letter.toUpperCase()).replaceAll("-", ""); + return [camel, value]; + })); + } + clone(andChildren = false) { + const element = this._element.cloneNode(andChildren); + const attributes = Object.assign({}, this._attributes); + return new _TempleElement(element, attributes); + } + getAttribute(key) { + return this._attributes[key]; + } + hasAttribute(key) { + return key in this._attributes; + } + hasEvent(event) { + return this._events.has(event); + } + removeAttribute(key, silent = false) { + const current = this.getAttribute(key); + if (typeof current === "undefined") { + return this; + } + delete this._attributes[key]; + if (!silent) { + TempleEmitter_1.default.emit("attribute-remove", { + element: this, + key, + previous: current + }); + } + return this; + } + setAttribute(key, value, silent = false) { + if (typeof value === "undefined") { + return this.removeAttribute(key, silent); + } + const current = this.getAttribute(key); + if (current === value) { + return this; + } + this._attributes[key] = value; + if (!silent) { + if (typeof current === "undefined") { + TempleEmitter_1.default.emit("attribute-create", { element: this, key, value }); + } else { + TempleEmitter_1.default.emit("attribute-update", { + element: this, + key, + value, + previous: current + }); + } + } + return this; + } + setAttributes(attributes, silent = false) { + for (const [key, value] of Object.entries(attributes)) { + this.setAttribute(key, value, silent); + } + const names = Object.keys(attributes); + for (const key of Object.keys(this._attributes)) { + if (!names.includes(key)) { + this.removeAttribute(key, silent); + } + } + return this; + } + tree(attributes, name, value) { + if (!attributes) { + attributes = Object.assign({}, this._attributes); + } + if (name) { + const path = name.split("-"); + if (path.length > 0) { + const key = path.shift(); + if (path.length > 0) { + if (!attributes[key]) + attributes[key] = {}; + this.tree(attributes[key], path.join("-"), value); + } else { + attributes[key] = value; + } + } + return attributes; + } + const branch = {}; + for (const [name2, value2] of Object.entries(attributes)) { + this.tree(branch, name2, value2); + } + return branch; + } + }; + exports.default = TempleElement; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleRegistry.js + var require_TempleRegistry = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleRegistry.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleElement_1 = __importDefault(require_TempleElement()); + var decoder = document.createElement("textarea"); + var decode = (value) => { + decoder.innerHTML = value; + return decoder.value; + }; + var TempleRegistry9 = class _TempleRegistry { + static get elements() { + return this._elements; + } + static createComponent(tagname, definition, attributes = {}, children5 = []) { + const { registered } = definition; + if (!registered) { + return this.createVirtualComponent(tagname, definition, attributes, children5); + } + const component = document.createElement(registered); + customElements.upgrade(component); + const element = _TempleRegistry.register(component, attributes); + element.setAttributes(attributes, true); + for (const [name, value] of Object.entries(attributes)) { + if (typeof value === "string") { + component.setAttribute(name, value); + } else if (value === true) { + component.setAttribute(name, ""); + } + } + this._cleanChildren(children5).forEach((child) => component.appendChild(child)); + return element; + } + static createElement(name, attributes = {}, children5 = []) { + const element = document.createElement(name); + for (const [name2, value] of Object.entries(attributes)) { + if (typeof value === "string") { + element.setAttribute(name2, value); + } else if (value === true) { + element.setAttribute(name2, ""); + } + } + this._cleanChildren(children5).forEach((child) => element.appendChild(child)); + return this.register(element, attributes); + } + static createText(value, escape = true) { + return document.createTextNode(decode(value)); + } + static createVirtualComponent(tagname, definition, attributes = {}, children5 = []) { + const component = document.createElement(tagname); + Object.setPrototypeOf(component, definition.prototype); + component.constructor = definition.constructor; + component.constructor.component = definition.component; + if (definition.observedAttributes) { + component.constructor.observedAttributes = definition.observedAttributes; + } + component.register(attributes, children5); + return component.element; + } + static cloneElement(node, andChildren = false) { + const element = this.register(node); + const clone = element.clone(); + if (andChildren) { + element.element.childNodes.forEach((child) => { + if (child instanceof Text) { + clone.element.appendChild(child.cloneNode()); + return; + } + const cloneChild = this.cloneElement(child, true); + clone.element.appendChild(cloneChild.element); + }); + } + return clone; + } + static filter(callback) { + const elements = []; + this._elements.forEach((temple, html) => { + if (callback(temple, html)) { + elements.push(temple); + } + }); + return elements; + } + static get(element) { + return this._elements.get(element) || null; + } + static has(element) { + return this._elements.has(element); + } + static map(callback) { + const elements = []; + this._elements.forEach((temple, html) => { + elements.push(callback(temple, html)); + }); + return elements; + } + static register(element, attributes, andChildren = false) { + if (this.has(element)) { + return this.get(element); + } + if (!attributes) { + Array.from(element.attributes).forEach((attribute) => { + attributes = attributes || {}; + attributes[attribute.name] = attribute.value !== "" ? attribute.value : true; + }); + } + const node = new TempleElement_1.default(element, attributes || {}); + this._elements.set(element, node); + if (andChildren) { + Array.from(element.children).forEach((child) => { + if (child instanceof Element) { + this.register(child, void 0, true); + } + }); + } + return node; + } + static _cleanChildren(children5) { + return Array.from(children5).filter((child) => typeof child !== "undefined").map((child) => typeof child === "string" ? this.createText(child) : child instanceof TempleElement_1.default ? child.element : child); + } + }; + TempleRegistry9._elements = /* @__PURE__ */ new Map(); + exports.default = TempleRegistry9; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/data.js + var require_data = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/data.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.TempleDataMap = void 0; + var TempleDataMap = class { + constructor() { + if (!window.__APP_DATA__) { + window.__APP_DATA__ = {}; + } + } + clear() { + window.__APP_DATA__ = {}; + return this; + } + delete(key) { + if (this.has(key)) { + delete window.__APP_DATA__[key]; + return true; + } + return false; + } + entries() { + return Object.entries(window.__APP_DATA__); + } + has(key) { + return key in window.__APP_DATA__; + } + get(key) { + return window.__APP_DATA__[key]; + } + keys() { + return Object.keys(window.__APP_DATA__); + } + set(key, value) { + window.__APP_DATA__[key] = value; + return this; + } + values() { + return Object.values(window.__APP_DATA__); + } + }; + exports.TempleDataMap = TempleDataMap; + var data2 = new TempleDataMap(); + exports.default = data2; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleComponent.js + var require_TempleComponent = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleComponent.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var Exception_1 = __importDefault(require_Exception()); + var TempleElement_1 = __importDefault(require_TempleElement()); + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + var TempleEmitter_1 = __importDefault(require_TempleEmitter()); + var data_1 = __importDefault(require_data()); + var TempleComponent8 = class _TempleComponent extends HTMLElement { + static get registered() { + return customElements.getName(this); + } + static register() { + customElements.define(this.component[0], this); + } + get attr() { + return Object.fromEntries(Array.from(this.attributes).map((attr) => [attr.name, attr.value])); + } + get element() { + if (!TempleRegistry_1.default.has(this)) { + throw Exception_1.default.for("Component %s not mapped.", this.metadata.classname); + } + return TempleRegistry_1.default.get(this); + } + get metadata() { + const { component, registered, observedAttributes: observed = [] } = this.constructor; + const [tagname, classname] = component; + return { + tagname, + classname, + registered, + observed + }; + } + get originalChildren() { + return this._children; + } + get initiated() { + return this._initiated; + } + get props() { + return this.getAttributes(); + } + get propsCamel() { + return this.element.camel(); + } + get propsTree() { + return this.element.tree(); + } + get virtual() { + return this._virtual; + } + set props(props4) { + this.setAttributes(props4); + } + set originalChildren(children5) { + if (typeof this._children === "undefined") { + this._children = this._cleanChildren(children5 || []); + } + } + constructor() { + super(); + this._children = void 0; + this._initiated = false; + this._observer = null; + this._rendering = false; + this._template = null; + this._virtual = false; + if (!TempleRegistry_1.default.has(this)) { + const { registered } = this.metadata; + if (!registered) { + throw Exception_1.default.for("Component %s not registered in customElements.", this.metadata.classname); + } + const attributes = Object.fromEntries(Array.from(this.attributes).map((attr) => [attr.name, attr.value !== "" ? attr.value : true])); + TempleRegistry_1.default.register(this, attributes); + } + } + adoptedCallback() { + this.render(); + this.emit("adopt", this); + } + attributeChangedCallback(name, prev, next) { + if (this._rendering) { + return; + } + const action = prev === null ? "add" : next === null ? "remove" : "update"; + if (next === null && this.hasAttribute(name)) { + this.element.removeAttribute(name); + } else if (next === "") { + this.element.setAttribute(name, true); + } else { + this.element.setAttribute(name, next); + } + this.emit("attributechange", { action, name, prev, value: next, target: this }); + } + clone(andChildren = false) { + return this.cloneElement(this, andChildren); + } + cloneElement(element, andChildren = false) { + return TempleRegistry_1.default.cloneElement(element, andChildren); + } + connectedCallback() { + this.wait(); + this.emit("connect", this); + } + createComponent(tagname, definition, attributes = {}, children5 = []) { + return TempleRegistry_1.default.createComponent(tagname, definition, attributes, children5); + } + createElement(name, attributes = {}, children5 = []) { + return TempleRegistry_1.default.createElement(name, attributes, children5); + } + disconnectedCallback() { + this.emit("disconnect", this); + } + emit(event, detail) { + this.dispatchEvent(new CustomEvent(event, { detail })); + return this; + } + getAttribute(name) { + return this.element.getAttribute(name); + } + getAttributes() { + return Object.assign({}, this.element.attributes); + } + getChildren(type = true) { + if (type === true) { + return Array.from(this.childNodes); + } else if (type === false) { + return this._children; + } else if (type === null && this.shadowRoot) { + return Array.from(this.shadowRoot.childNodes); + } + return []; + } + getElement(element) { + return TempleRegistry_1.default.get(element); + } + getParentComponent() { + let parent = this.parentElement; + while (parent) { + if (parent instanceof _TempleComponent) { + return parent; + } + parent = parent.parentElement; + } + return null; + } + hasAttribute(name) { + return this.element.hasAttribute(name); + } + on(event, callback) { + this.removeEventListener(event, callback); + this.addEventListener(event, callback); + return this; + } + once(event, callback) { + const unbinder = (e) => { + this.removeEventListener(event, callback); + callback(e); + }; + this.on(event, unbinder); + return this; + } + register(attributes = {}, children5 = []) { + if (TempleRegistry_1.default.has(this)) { + const element = TempleRegistry_1.default.get(this); + element.setAttributes(attributes); + } else { + TempleRegistry_1.default.register(this, attributes); + } + for (const [name, value] of Object.entries(attributes)) { + if (typeof value === "string" || value === true) { + super.setAttribute(name, value === "" || value === name || value === true ? true : value); + } + } + this._children = this._cleanChildren(children5); + this._children.forEach((child) => this.appendChild(child)); + this._virtual = true; + this.connectedCallback(); + } + removeAttribute(name) { + const prev = this.getAttribute(name); + if (this.hasAttribute(name)) { + this.element.removeAttribute(name); + } + if (super.hasAttribute(name)) { + super.removeAttribute(name); + } + if (this._virtual && this.metadata.observed.includes(name)) { + this.attributeChangedCallback(name, prev, null); + } + } + render() { + const parent = this.getParentComponent(); + if (parent && !parent.initiated) { + return; + } else if (this._rendering) { + return; + } + this._rendering = true; + const prev = data_1.default.get("current"); + data_1.default.set("current", this); + if (!this._template) { + this._template = this.template(); + } else { + TempleEmitter_1.default.emit("unmounted", this); + } + const children5 = this._template().filter(Boolean); + const styles = this.styles(); + const mode = styles.length === 0 ? "light" : "shadow"; + const { light, shadow } = this._getChildren(children5, mode); + if (shadow.length === 0) { + this.textContent = ""; + light.forEach((child) => this.appendChild(child)); + } else { + if (!this.shadowRoot) { + this.attachShadow({ mode: "open", delegatesFocus: true }); + } + const style = document.createElement("style"); + style.innerText = styles; + const shadowRoot = this.shadowRoot; + shadowRoot.textContent = ""; + shadowRoot.appendChild(style); + shadow.forEach((child) => shadowRoot.appendChild(child)); + if (light.length) { + this.textContent = ""; + light.forEach((child) => this.appendChild(child)); + } + } + if (prev) { + data_1.default.set("current", prev); + } else { + data_1.default.delete("current"); + } + this._initiated = true; + this._rendering = false; + TempleEmitter_1.default.emit("mounted", this); + return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML; + } + setAttribute(name, value) { + const prev = this.getAttribute(name); + if (value === "" || value === true) { + this.element.setAttribute(name, true); + super.setAttribute(name, ""); + } else if (value === false) { + this.element.setAttribute(name, value); + super.removeAttribute(name); + } else if (typeof value === "string") { + this.element.setAttribute(name, value); + super.setAttribute(name, value); + } else { + this.element.setAttribute(name, value); + } + if (this._virtual && this.metadata.observed.includes(name) && typeof value === "string") { + this.attributeChangedCallback(name, prev, value); + } + } + setAttributes(attributes) { + Object.entries(attributes).forEach(([key, value]) => this.setAttribute(key, value)); + } + unbind(event, callback) { + this.removeEventListener(event, callback); + return this; + } + wait() { + if (document.readyState !== "loading") { + this._update(); + } else { + const next = () => { + this._update(); + TempleEmitter_1.default.unbind("ready", next); + }; + TempleEmitter_1.default.on("ready", next); + } + } + _cleanChildren(children5) { + return Array.from(children5).filter((child) => typeof child !== "undefined").map((child) => typeof child === "string" ? TempleRegistry_1.default.createText(child) : child instanceof TempleElement_1.default ? child.element : child); + } + _getChildren(children5, mode) { + const anyNodes = this._getTemplateNodes(children5); + const lightNodes = this._getTemplateNodes(children5, "light"); + const shadowNodes = this._getTemplateNodes(children5, "shadow"); + const defaultNodes = anyNodes.length > 0 ? anyNodes : children5; + return { + light: lightNodes.length > 0 ? lightNodes : mode === "light" ? defaultNodes : [], + shadow: shadowNodes.length > 0 ? shadowNodes : mode === "shadow" ? defaultNodes : [] + }; + } + _getTemplateNodes(children5, type) { + const template = children5.find((child) => this._isTemplate(child, type)); + if (!template) + return []; + return Array.from(template.childNodes || []); + } + _isTemplate(child, type) { + if (child.nodeName !== "TEMPLATE") + return false; + const template = child; + if (!type) + return !template.hasAttribute("type"); + return type === template.getAttribute("type"); + } + _toNodeList(value) { + if (value instanceof Node) { + return [value]; + } + if (Array.isArray(value)) { + if (value.every((item) => item instanceof Node)) { + return value; + } + } + return [TempleRegistry_1.default.createText(String(value))]; + } + _update() { + if (typeof this._children === "undefined") { + this._children = this._cleanChildren(Array.from(this.childNodes || [])); + } + if (!this._initiated) { + this.render(); + } + } + }; + exports.default = TempleComponent8; + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleMap.js + var require_StyleMap = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleMap.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.stylemap = stylemap; + function stylemap(styles = {}) { + return new StyleMap(Object.entries(styles)); + } + var StyleMap = class _StyleMap extends Map { + add(property, values) { + if (!this.has(property)) { + this.set(property, []); + } + const styles = this.get(property); + if (typeof values === "string" || typeof values === "number") { + styles.push(values); + } else if (Array.isArray(values)) { + styles.push(...values); + } + return this; + } + clone() { + const stylemap2 = new _StyleMap(); + for (const [key, values] of this.entries()) { + stylemap2.set(key, values.slice()); + } + return stylemap2; + } + replaceAll(search, replace) { + for (const [key, values] of this.entries()) { + this.set(key, values.map((value) => { + if (typeof value === "string") { + return value.replaceAll(search, replace); + } + return value; + })); + } + return this; + } + }; + exports.default = StyleMap; + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleSet.js + var require_StyleSet = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleSet.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.styleset = styleset; + var StyleMap_1 = __importDefault(require_StyleMap()); + function styleset(styles = {}) { + return new StyleSet2(Object.entries(styles)); + } + var StyleSet2 = class extends Map { + add(selector, property, values) { + if (!this.has(selector)) { + this.set(selector, new StyleMap_1.default()); + } + const styles = this.get(selector); + if (typeof values === "string") { + styles.set(property, values.split(" ")); + } else if (Array.isArray(values)) { + styles.set(property, values); + } + return this; + } + map(selector, map) { + this.set(selector, map); + return this; + } + toString() { + const styleset2 = []; + for (const [selector, styles] of this.entries()) { + const definitions = []; + for (const [property, values] of styles.entries()) { + if (property && (values === null || values === void 0 ? void 0 : values.length)) { + definitions.push(`${property}:${values.join(" ")}`); + } + } + if (definitions.length) { + styleset2.push(`${selector}{${definitions.join(";")}}`); + } + } + return styleset2.join(""); + } + }; + exports.default = StyleSet2; + } + }); + + // ../../node_modules/@ossph/temple-ui/utilities/style/color.js + var require_color = __commonJS({ + "../../node_modules/@ossph/temple-ui/utilities/style/color.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = color; + function color(props4, styles, initial = false, selector = ":host", property = "color") { + const { color: color2, white, black, info, warning, success, error, muted, primary, secondary, theme } = props4; + const style = color2 ? color2 : theme ? `var(--${theme})` : white ? "var(--white)" : black ? "var(--black)" : info ? "var(--info)" : warning ? "var(--warning)" : success ? "var(--success)" : error ? "var(--error)" : muted ? "var(--muted)" : primary ? "var(--primary)" : secondary ? "var(--secondary)" : initial; + if (style) { + styles.add(selector, property, style); + } + return color2 ? "color" : white ? "white" : black ? "black" : info ? "info" : warning ? "warning" : success ? "success" : error ? "error" : muted ? "muted" : primary ? "primary" : secondary ? "secondary" : "initial"; + } + } + }); + + // ../../node_modules/@ossph/temple-ui/utilities/style/curve.js + var require_curve = __commonJS({ + "../../node_modules/@ossph/temple-ui/utilities/style/curve.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = curve; + function curve(props4, styles, initial = false, selector = ":host") { + const { curve: curve2, curved, rounded, pill } = props4; + const style = curve2 ? `${curve2}px` : curved ? "4px" : rounded ? "12px" : pill ? "10000px" : initial; + if (style) { + styles.add(selector, "border-radius", style); + styles.add(selector, "overflow", "hidden"); + } + return curve2 ? "curve" : curved ? "curved" : rounded ? "rounded" : pill ? "pill" : "initial"; + } + } + }); + + // ../../node_modules/@ossph/temple-ui/utilities/style/display.js + var require_display = __commonJS({ + "../../node_modules/@ossph/temple-ui/utilities/style/display.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = display; + function display(props4, styles, initial = false, selector = ":host") { + const { flex, none, inline, block, "inline-block": iblock, "inline-flex": iflex } = props4; + const style = flex ? "flex" : none ? "none" : block ? "block" : inline ? "inline" : iflex ? "inline-flex" : iblock ? "inline-block" : initial; + if (style) { + styles.add(selector, "display", style); + } + return style || "initial"; + } + } + }); + + // ../../node_modules/@ossph/temple-ui/utilities/style/padding.js + var require_padding = __commonJS({ + "../../node_modules/@ossph/temple-ui/utilities/style/padding.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = padding; + function padding(props4, styles, selector = ":host") { + const { padding: padding2, "padding-x": paddingX, "padding-y": paddingY } = props4; + let set = false; + if (!isNaN(parseInt(padding2))) { + styles.add(selector, "padding", `${padding2}px`); + set = true; + } + if (!isNaN(parseInt(paddingX))) { + styles.add(selector, "padding-left", `${paddingX}px`); + styles.add(selector, "padding-right", `${paddingX}px`); + set = true; + } + if (!isNaN(parseInt(paddingY))) { + styles.add(selector, "padding-top", `${paddingY}px`); + styles.add(selector, "padding-bottom", `${paddingY}px`); + set = true; + } + return set; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleField.js + var require_TempleField = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleField.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleComponent_1 = __importDefault(require_TempleComponent()); + var TempleField = class extends TempleComponent_1.default { + get field() { + return this._field; + } + constructor() { + super(); + this._field = this.attachInternals(); + } + formAssociatedCallback(form) { + this.emit("formassociate", this); + } + formDisabledCallback(disabled) { + this.emit("formdisable", this); + } + formResetCallback() { + this.emit("formreset", this); + } + }; + TempleField.formAssociated = true; + exports.default = TempleField; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/component.js + var require_component = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/component.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = component; + var Exception_1 = __importDefault(require_Exception()); + var data_1 = __importDefault(require_data()); + function component(component2 = null, nullable = false) { + if (!component2) { + component2 = data_1.default.get("current"); + if (!component2) { + if (!nullable) { + throw Exception_1.default.for("Not called within a Temple component"); + } + return null; + } + } + return component2; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/env.js + var require_env = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/env.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var data_1 = __importDefault(require_data()); + function env(name) { + const env2 = data_1.default.get("env") || {}; + if (name) { + return env2[name] || null; + } + return env2; + } + exports.default = env; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/props.js + var require_props = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/props.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = props4; + var component_1 = __importDefault(require_component()); + var data_1 = __importDefault(require_data()); + function props4(pointer = null) { + const component = (0, component_1.default)(pointer, true); + if (typeof component === "string") { + return data_1.default.get("props") || {}; + } + return component ? component.props : {}; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/classnames.js + var require_classnames = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/classnames.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.classlist = classlist2; + exports.default = classnames; + var component_1 = __importDefault(require_component()); + var props_1 = __importDefault(require_props()); + function classlist2(pointer = null) { + var _a; + if (pointer === "body") { + return document.body.classList; + } else if (pointer === "head") { + return document.head.classList; + } else if (pointer === "document") { + return (_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.classList; + } + const component = (0, component_1.default)(pointer); + return component === null || component === void 0 ? void 0 : component.classList; + } + function classnames(pointer = null) { + return (0, props_1.default)(pointer)["class"] || ""; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/children.js + var require_children = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/children.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.innerHTML = innerHTML; + exports.innerText = innerText; + exports.default = children5; + var component_1 = __importDefault(require_component()); + function innerHTML(pointer = null) { + const inner = children5(pointer); + const wrapper = document.createElement("template"); + wrapper.append(...inner.map((child) => child.cloneNode(true))); + return wrapper.innerHTML; + } + function innerText(pointer = null) { + const inner = children5(pointer); + const wrapper = document.createElement("template"); + wrapper.append(...inner.map((child) => child.cloneNode(true))); + return wrapper.innerText; + } + function children5(pointer = null) { + const component = (0, component_1.default)(pointer, true); + return typeof component !== "string" && component ? component.originalChildren || [] : []; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/signal.js + var require_signal = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/signal.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.SignalRegistry = void 0; + exports.default = signal; + var component_1 = __importDefault(require_component()); + var Exception_1 = __importDefault(require_Exception()); + var SignalRegistry = class _SignalRegistry { + static observe(component, value) { + const methods = { + getter: () => property.raw, + setter: (value2) => value2 + }; + const listeners = /* @__PURE__ */ new Set(); + const property = { + raw: value, + change(callback) { + listeners.add(callback); + return property; + }, + getter(callback) { + methods.getter = callback; + return property; + }, + setter(callback) { + methods.setter = callback; + return property; + } + }; + Object.defineProperty(property, "value", { + get() { + return methods.getter(); + }, + set(value2) { + const formatted = methods.setter(value2); + const rerender = _SignalRegistry.serialize(formatted) !== _SignalRegistry.serialize(property.raw); + property.raw = formatted; + if (rerender) { + listeners.forEach((listener) => listener(formatted)); + component.render(); + } + } + }); + const observer = this._observers.get(component); + if (!observer) { + this._observers.set(component, { + observed: 1, + values: [property] + }); + } else { + observer.observed++; + observer.values.push(property); + } + return property; + } + static observer(component) { + return this._observers.get(component) || null; + } + static serialize(value) { + return JSON.stringify(value); + } + }; + exports.SignalRegistry = SignalRegistry; + SignalRegistry._observers = /* @__PURE__ */ new Map(); + function signal(value, pointer = null) { + const component = (0, component_1.default)(pointer); + if (!component.initiated) { + return SignalRegistry.observe(component, value); + } + const observer = SignalRegistry.observer(component); + if (!observer) { + throw Exception_1.default.for("Signal state mismatch"); + } + const values = observer.values; + return values[observer.observed++ % observer.values.length]; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleSheet.js + var require_StyleSheet = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleSheet.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.breakpoints = void 0; + exports.stylesheet = stylesheet; + var StyleSet_1 = __importDefault(require_StyleSet()); + exports.breakpoints = { + all: 0, + xl4: 1920, + xl3: 1536, + xl2: 1280, + xl: 1024, + lg: 992, + md: 767, + sm: 420, + xs: 360 + }; + function stylesheet() { + return new StyleSheet(); + } + var StyleSheet = class extends Map { + add(media, selector, property, values) { + if (!this.has(media)) { + this.set(media, new StyleSet_1.default()); + } + const styleset = this.get(media); + styleset.add(selector, property, values); + return this; + } + map(media, selector, map) { + if (!this.has(media)) { + this.set(media, new StyleSet_1.default()); + } + const styleset = this.get(media); + styleset.map(selector, map); + return this; + } + toString() { + var _a; + const stylesheet2 = []; + for (const [media, breakpoint] of Object.entries(exports.breakpoints)) { + const styles = (_a = this.get(media)) === null || _a === void 0 ? void 0 : _a.toString(); + if (!styles) { + continue; + } + if (media === "all") { + stylesheet2.push(styles); + continue; + } + stylesheet2.push(`@media (max-width:${breakpoint}px){${styles}}`); + } + return stylesheet2.join(""); + } + }; + exports.default = StyleSheet; + } + }); + + // ../../node_modules/@ossph/temple/dist/client.js + var require_client = __commonJS({ + "../../node_modules/@ossph/temple/dist/client.js"(exports) { + "use strict"; + var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { + return m[k]; + } }; + } + Object.defineProperty(o, k2, desc); + } : function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + o[k2] = m[k]; + }); + var __setModuleDefault = exports && exports.__setModuleDefault || (Object.create ? function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); + } : function(o, v) { + o["default"] = v; + }); + var __importStar = exports && exports.__importStar || function(mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) { + for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + } + __setModuleDefault(result, mod); + return result; + }; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.StyleSheet = exports.StyleSet = exports.StyleMap = exports.stylesheet = exports.styleset = exports.stylemap = exports.breakpoints = exports.SignalRegistry = exports.TempleException = exports.TempleEmitter = exports.TempleElement = exports.TempleRegistry = exports.TempleComponent = exports.TempleField = exports.TempleDataMap = exports.emitter = exports.signal = exports.innerHTML = exports.innerText = exports.children = exports.classnames = exports.classlist = exports.props = exports.env = exports.data = exports.component = void 0; + var Exception_1 = __importDefault(require_Exception()); + exports.TempleException = Exception_1.default; + var TempleField_1 = __importDefault(require_TempleField()); + exports.TempleField = TempleField_1.default; + var TempleComponent_1 = __importDefault(require_TempleComponent()); + exports.TempleComponent = TempleComponent_1.default; + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + exports.TempleRegistry = TempleRegistry_1.default; + var TempleElement_1 = __importDefault(require_TempleElement()); + exports.TempleElement = TempleElement_1.default; + var TempleEmitter_1 = __importStar(require_TempleEmitter()); + exports.emitter = TempleEmitter_1.default; + Object.defineProperty(exports, "TempleEmitter", { enumerable: true, get: function() { + return TempleEmitter_1.TempleEmitter; + } }); + var component_1 = __importDefault(require_component()); + exports.component = component_1.default; + var data_1 = __importStar(require_data()); + exports.data = data_1.default; + Object.defineProperty(exports, "TempleDataMap", { enumerable: true, get: function() { + return data_1.TempleDataMap; + } }); + var env_1 = __importDefault(require_env()); + exports.env = env_1.default; + var props_1 = __importDefault(require_props()); + exports.props = props_1.default; + var classnames_1 = __importStar(require_classnames()); + exports.classnames = classnames_1.default; + Object.defineProperty(exports, "classlist", { enumerable: true, get: function() { + return classnames_1.classlist; + } }); + var children_1 = __importStar(require_children()); + exports.children = children_1.default; + Object.defineProperty(exports, "innerHTML", { enumerable: true, get: function() { + return children_1.innerHTML; + } }); + Object.defineProperty(exports, "innerText", { enumerable: true, get: function() { + return children_1.innerText; + } }); + var signal_1 = __importStar(require_signal()); + exports.signal = signal_1.default; + Object.defineProperty(exports, "SignalRegistry", { enumerable: true, get: function() { + return signal_1.SignalRegistry; + } }); + var StyleMap_1 = __importStar(require_StyleMap()); + exports.StyleMap = StyleMap_1.default; + Object.defineProperty(exports, "stylemap", { enumerable: true, get: function() { + return StyleMap_1.stylemap; + } }); + var StyleSet_1 = __importStar(require_StyleSet()); + exports.StyleSet = StyleSet_1.default; + Object.defineProperty(exports, "styleset", { enumerable: true, get: function() { + return StyleSet_1.styleset; + } }); + var StyleSheet_1 = __importStar(require_StyleSheet()); + exports.StyleSheet = StyleSheet_1.default; + Object.defineProperty(exports, "stylesheet", { enumerable: true, get: function() { + return StyleSheet_1.stylesheet; + } }); + Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function() { + return StyleSheet_1.breakpoints; + } }); + } + }); + + // ../../node_modules/@ossph/temple/index.js + var require_temple = __commonJS({ + "../../node_modules/@ossph/temple/index.js"(exports, module) { + module.exports = { ...require_client() }; + } + }); + + // ../../node_modules/prismjs/prism.js + var require_prism = __commonJS({ + "../../node_modules/prismjs/prism.js"(exports, module) { + var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {}; + var Prism2 = function(_self2) { + var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i; + var uniqueId = 0; + var plainTextGrammar = {}; + var _2 = { + /** + * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the + * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load + * additional languages or plugins yourself. + * + * By setting this value to `true`, Prism will not automatically highlight all code elements on the page. + * + * You obviously have to change this value before the automatic highlighting started. To do this, you can add an + * empty Prism object into the global scope before loading the Prism script like this: + * + * ```js + * window.Prism = window.Prism || {}; + * Prism.manual = true; + * // add a new + + + + + + +
+ + + Temple Logo + +

+ Temple +

+ + +
+
+
+

Oops...

+ + Something went wrong. Please try again later. + + + 
Document must start with an <html> tag.
+ +
+
+ + + \ No newline at end of file diff --git a/docs/build/client/e3f8653650902fcc262b.js b/docs/build/client/e3f8653650902fcc262b.js new file mode 100644 index 0000000..4ebc1da --- /dev/null +++ b/docs/build/client/e3f8653650902fcc262b.js @@ -0,0 +1,3477 @@ +var TempleAPI = (() => { + var __create = Object.create; + var __defProp = Object.defineProperty; + var __getOwnPropDesc = Object.getOwnPropertyDescriptor; + var __getOwnPropNames = Object.getOwnPropertyNames; + var __getProtoOf = Object.getPrototypeOf; + var __hasOwnProp = Object.prototype.hasOwnProperty; + var __commonJS = (cb, mod) => function __require() { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + }; + var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); + }; + var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; + }; + var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( + // If the importer is in node compatibility mode or this is not an ESM + // file that has been converted to a CommonJS file using a Babel- + // compatible transform (i.e. "__esModule" has not been set), then set + // "default" to the CommonJS "module.exports" for node compatibility. + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod + )); + var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + + // ../../node_modules/@ossph/temple/dist/Exception.js + var require_Exception = __commonJS({ + "../../node_modules/@ossph/temple/dist/Exception.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleException2 = class extends Error { + static for(message, ...values) { + values.forEach(function(value) { + message = message.replace("%s", value); + }); + return new this(message); + } + static forErrorsFound(errors) { + const exception = new this("Invalid Parameters"); + exception.errors = errors; + return exception; + } + static require(condition, message, ...values) { + if (!condition) { + for (const value of values) { + message = message.replace("%s", value); + } + throw new this(message); + } + } + constructor(message, code = 500) { + super(); + this.errors = {}; + this.start = 0; + this.end = 0; + this.message = message; + this.name = this.constructor.name; + this.code = code; + } + withCode(code) { + this.code = code; + return this; + } + withPosition(start, end) { + this.start = start; + this.end = end; + return this; + } + toJSON() { + return { + error: true, + code: this.code, + message: this.message + }; + } + }; + exports.default = TempleException2; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleEmitter.js + var require_TempleEmitter = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleEmitter.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.match = exports.TempleEmitter = exports.events = void 0; + exports.bindAttribute = bindAttribute; + exports.unbindAttribute = unbindAttribute; + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + exports.events = [ + "click", + "dblclick", + "mousedown", + "mouseup", + "mousemove", + "mouseover", + "mouseout", + "wheel", + "keydown", + "keypress", + "keyup", + "blur", + "change", + "contextmenu", + "focus", + "input", + "submit", + "invalid", + "reset", + "search", + "select", + "copy", + "cut", + "paste", + "drag", + "dragstart", + "dragend", + "dragover", + "dragenter", + "dragleave", + "drop", + "scroll", + "durationchange", + "ended", + "error", + "loadeddata", + "loadedmetadata", + "loadstart", + "pause", + "play", + "playing", + "progress", + "ratechange", + "seeked", + "seeking", + "stalled", + "suspend", + "timeupdate", + "volumechange", + "waiting", + "animationstart", + "animationend", + "animationiteration", + "transitionend", + "toggle" + ]; + var TempleEmitter = class extends EventTarget { + emit(event, target) { + this.dispatchEvent(new CustomEvent(event, { detail: target })); + return this; + } + on(event, callback) { + if (event === "ready") { + if (document.readyState !== "loading") { + const event2 = new CustomEvent("ready"); + setTimeout(() => callback(event2), 1); + return this; + } + } + this.addEventListener(event, callback); + return this; + } + once(event, callback) { + const unbinder = (e) => { + this.unbind(event, unbinder); + callback(e); + }; + this.on(event, unbinder); + return this; + } + unbind(event, callback) { + this.removeEventListener(event, callback); + return this; + } + }; + exports.TempleEmitter = TempleEmitter; + var match = (element, attribute, bind = true) => { + return Array.from(element.querySelectorAll("*")).filter((element2) => { + const node = TempleRegistry_1.default.get(element2); + const matched = node && node.hasAttribute(attribute) && (!bind || !node.hasEvent(attribute)); + if (matched) { + node.addEvent(attribute); + } + return matched; + }).map((element2) => TempleRegistry_1.default.get(element2)); + }; + exports.match = match; + function bindAttribute(name, bind) { + emitter2.on("mounted", (e) => { + if (!e.detail) + return; + const element = e.detail; + (0, exports.match)(element.shadowRoot || element, name).forEach(bind); + }); + } + function unbindAttribute(name, bind) { + emitter2.on("unmounted", (e) => { + if (!e.detail) + return; + const element = e.detail; + (0, exports.match)(element.shadowRoot || element, name, false).forEach(bind); + }); + } + var emitter2 = new TempleEmitter(); + exports.default = (() => { + document.onreadystatechange = () => { + if (document.readyState !== "loading") { + emitter2.emit("ready"); + } + }; + bindAttribute("mount", (element) => { + const callback = element.getAttribute("mount"); + if (typeof callback === "function") { + const event = new CustomEvent("mount", { + detail: { + node: element, + target: element.element + } + }); + callback(event); + } + }); + unbindAttribute("unmount", (element) => { + const callback = element.getAttribute("unmount"); + if (typeof callback === "function") { + const event = new CustomEvent("unmount", { + detail: { + node: element, + target: element.element + } + }); + callback(event); + } + }); + bindAttribute("if", (element) => { + const condition = element.getAttribute("if"); + if (condition === false || condition === "false") { + element.element.remove(); + } else if (typeof condition === "function" && !condition()) { + element.element.remove(); + } + }); + exports.events.forEach((event) => { + bindAttribute(event, (element) => { + const callback = element.getAttribute(event); + if (typeof callback === "function") { + element.element.removeEventListener(event, callback); + element.element.addEventListener(event, callback); + } + }); + unbindAttribute(event, (element) => { + const callback = element.getAttribute(event); + if (typeof callback === "function") { + element.element.removeEventListener(event, callback); + } + }); + }); + return emitter2; + })(); + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleElement.js + var require_TempleElement = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleElement.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleEmitter_1 = __importDefault(require_TempleEmitter()); + var TempleElement = class _TempleElement { + get attributes() { + return Object.assign({}, this._attributes); + } + get element() { + return this._element; + } + get events() { + return this._events; + } + constructor(element, attributes) { + this._events = /* @__PURE__ */ new Set(); + this._element = element; + this._attributes = attributes; + } + addEvent(event) { + this._events.add(event); + return this; + } + camel() { + return Object.fromEntries(Object.entries(this._attributes).map(([key, value]) => { + if (key === "class") { + return ["className", value]; + } + const camel = key.replace(/-([a-z])/g, (_2, letter) => letter.toUpperCase()).replaceAll("-", ""); + return [camel, value]; + })); + } + clone(andChildren = false) { + const element = this._element.cloneNode(andChildren); + const attributes = Object.assign({}, this._attributes); + return new _TempleElement(element, attributes); + } + getAttribute(key) { + return this._attributes[key]; + } + hasAttribute(key) { + return key in this._attributes; + } + hasEvent(event) { + return this._events.has(event); + } + removeAttribute(key, silent = false) { + const current = this.getAttribute(key); + if (typeof current === "undefined") { + return this; + } + delete this._attributes[key]; + if (!silent) { + TempleEmitter_1.default.emit("attribute-remove", { + element: this, + key, + previous: current + }); + } + return this; + } + setAttribute(key, value, silent = false) { + if (typeof value === "undefined") { + return this.removeAttribute(key, silent); + } + const current = this.getAttribute(key); + if (current === value) { + return this; + } + this._attributes[key] = value; + if (!silent) { + if (typeof current === "undefined") { + TempleEmitter_1.default.emit("attribute-create", { element: this, key, value }); + } else { + TempleEmitter_1.default.emit("attribute-update", { + element: this, + key, + value, + previous: current + }); + } + } + return this; + } + setAttributes(attributes, silent = false) { + for (const [key, value] of Object.entries(attributes)) { + this.setAttribute(key, value, silent); + } + const names = Object.keys(attributes); + for (const key of Object.keys(this._attributes)) { + if (!names.includes(key)) { + this.removeAttribute(key, silent); + } + } + return this; + } + tree(attributes, name, value) { + if (!attributes) { + attributes = Object.assign({}, this._attributes); + } + if (name) { + const path = name.split("-"); + if (path.length > 0) { + const key = path.shift(); + if (path.length > 0) { + if (!attributes[key]) + attributes[key] = {}; + this.tree(attributes[key], path.join("-"), value); + } else { + attributes[key] = value; + } + } + return attributes; + } + const branch = {}; + for (const [name2, value2] of Object.entries(attributes)) { + this.tree(branch, name2, value2); + } + return branch; + } + }; + exports.default = TempleElement; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleRegistry.js + var require_TempleRegistry = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleRegistry.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleElement_1 = __importDefault(require_TempleElement()); + var decoder = document.createElement("textarea"); + var decode = (value) => { + decoder.innerHTML = value; + return decoder.value; + }; + var TempleRegistry7 = class _TempleRegistry { + static get elements() { + return this._elements; + } + static createComponent(tagname, definition, attributes = {}, children4 = []) { + const { registered } = definition; + if (!registered) { + return this.createVirtualComponent(tagname, definition, attributes, children4); + } + const component = document.createElement(registered); + customElements.upgrade(component); + const element = _TempleRegistry.register(component, attributes); + element.setAttributes(attributes, true); + for (const [name, value] of Object.entries(attributes)) { + if (typeof value === "string") { + component.setAttribute(name, value); + } else if (value === true) { + component.setAttribute(name, ""); + } + } + this._cleanChildren(children4).forEach((child) => component.appendChild(child)); + return element; + } + static createElement(name, attributes = {}, children4 = []) { + const element = document.createElement(name); + for (const [name2, value] of Object.entries(attributes)) { + if (typeof value === "string") { + element.setAttribute(name2, value); + } else if (value === true) { + element.setAttribute(name2, ""); + } + } + this._cleanChildren(children4).forEach((child) => element.appendChild(child)); + return this.register(element, attributes); + } + static createText(value, escape = true) { + return document.createTextNode(decode(value)); + } + static createVirtualComponent(tagname, definition, attributes = {}, children4 = []) { + const component = document.createElement(tagname); + Object.setPrototypeOf(component, definition.prototype); + component.constructor = definition.constructor; + component.constructor.component = definition.component; + if (definition.observedAttributes) { + component.constructor.observedAttributes = definition.observedAttributes; + } + component.register(attributes, children4); + return component.element; + } + static cloneElement(node, andChildren = false) { + const element = this.register(node); + const clone = element.clone(); + if (andChildren) { + element.element.childNodes.forEach((child) => { + if (child instanceof Text) { + clone.element.appendChild(child.cloneNode()); + return; + } + const cloneChild = this.cloneElement(child, true); + clone.element.appendChild(cloneChild.element); + }); + } + return clone; + } + static filter(callback) { + const elements = []; + this._elements.forEach((temple, html) => { + if (callback(temple, html)) { + elements.push(temple); + } + }); + return elements; + } + static get(element) { + return this._elements.get(element) || null; + } + static has(element) { + return this._elements.has(element); + } + static map(callback) { + const elements = []; + this._elements.forEach((temple, html) => { + elements.push(callback(temple, html)); + }); + return elements; + } + static register(element, attributes, andChildren = false) { + if (this.has(element)) { + return this.get(element); + } + if (!attributes) { + Array.from(element.attributes).forEach((attribute) => { + attributes = attributes || {}; + attributes[attribute.name] = attribute.value !== "" ? attribute.value : true; + }); + } + const node = new TempleElement_1.default(element, attributes || {}); + this._elements.set(element, node); + if (andChildren) { + Array.from(element.children).forEach((child) => { + if (child instanceof Element) { + this.register(child, void 0, true); + } + }); + } + return node; + } + static _cleanChildren(children4) { + return Array.from(children4).filter((child) => typeof child !== "undefined").map((child) => typeof child === "string" ? this.createText(child) : child instanceof TempleElement_1.default ? child.element : child); + } + }; + TempleRegistry7._elements = /* @__PURE__ */ new Map(); + exports.default = TempleRegistry7; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/data.js + var require_data = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/data.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.TempleDataMap = void 0; + var TempleDataMap = class { + constructor() { + if (!window.__APP_DATA__) { + window.__APP_DATA__ = {}; + } + } + clear() { + window.__APP_DATA__ = {}; + return this; + } + delete(key) { + if (this.has(key)) { + delete window.__APP_DATA__[key]; + return true; + } + return false; + } + entries() { + return Object.entries(window.__APP_DATA__); + } + has(key) { + return key in window.__APP_DATA__; + } + get(key) { + return window.__APP_DATA__[key]; + } + keys() { + return Object.keys(window.__APP_DATA__); + } + set(key, value) { + window.__APP_DATA__[key] = value; + return this; + } + values() { + return Object.values(window.__APP_DATA__); + } + }; + exports.TempleDataMap = TempleDataMap; + var data2 = new TempleDataMap(); + exports.default = data2; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleComponent.js + var require_TempleComponent = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleComponent.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var Exception_1 = __importDefault(require_Exception()); + var TempleElement_1 = __importDefault(require_TempleElement()); + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + var TempleEmitter_1 = __importDefault(require_TempleEmitter()); + var data_1 = __importDefault(require_data()); + var TempleComponent6 = class _TempleComponent extends HTMLElement { + static get registered() { + return customElements.getName(this); + } + static register() { + customElements.define(this.component[0], this); + } + get attr() { + return Object.fromEntries(Array.from(this.attributes).map((attr) => [attr.name, attr.value])); + } + get element() { + if (!TempleRegistry_1.default.has(this)) { + throw Exception_1.default.for("Component %s not mapped.", this.metadata.classname); + } + return TempleRegistry_1.default.get(this); + } + get metadata() { + const { component, registered, observedAttributes: observed = [] } = this.constructor; + const [tagname, classname] = component; + return { + tagname, + classname, + registered, + observed + }; + } + get originalChildren() { + return this._children; + } + get initiated() { + return this._initiated; + } + get props() { + return this.getAttributes(); + } + get propsCamel() { + return this.element.camel(); + } + get propsTree() { + return this.element.tree(); + } + get virtual() { + return this._virtual; + } + set props(props4) { + this.setAttributes(props4); + } + set originalChildren(children4) { + if (typeof this._children === "undefined") { + this._children = this._cleanChildren(children4 || []); + } + } + constructor() { + super(); + this._children = void 0; + this._initiated = false; + this._observer = null; + this._rendering = false; + this._template = null; + this._virtual = false; + if (!TempleRegistry_1.default.has(this)) { + const { registered } = this.metadata; + if (!registered) { + throw Exception_1.default.for("Component %s not registered in customElements.", this.metadata.classname); + } + const attributes = Object.fromEntries(Array.from(this.attributes).map((attr) => [attr.name, attr.value !== "" ? attr.value : true])); + TempleRegistry_1.default.register(this, attributes); + } + } + adoptedCallback() { + this.render(); + this.emit("adopt", this); + } + attributeChangedCallback(name, prev, next) { + if (this._rendering) { + return; + } + const action = prev === null ? "add" : next === null ? "remove" : "update"; + if (next === null && this.hasAttribute(name)) { + this.element.removeAttribute(name); + } else if (next === "") { + this.element.setAttribute(name, true); + } else { + this.element.setAttribute(name, next); + } + this.emit("attributechange", { action, name, prev, value: next, target: this }); + } + clone(andChildren = false) { + return this.cloneElement(this, andChildren); + } + cloneElement(element, andChildren = false) { + return TempleRegistry_1.default.cloneElement(element, andChildren); + } + connectedCallback() { + this.wait(); + this.emit("connect", this); + } + createComponent(tagname, definition, attributes = {}, children4 = []) { + return TempleRegistry_1.default.createComponent(tagname, definition, attributes, children4); + } + createElement(name, attributes = {}, children4 = []) { + return TempleRegistry_1.default.createElement(name, attributes, children4); + } + disconnectedCallback() { + this.emit("disconnect", this); + } + emit(event, detail) { + this.dispatchEvent(new CustomEvent(event, { detail })); + return this; + } + getAttribute(name) { + return this.element.getAttribute(name); + } + getAttributes() { + return Object.assign({}, this.element.attributes); + } + getChildren(type = true) { + if (type === true) { + return Array.from(this.childNodes); + } else if (type === false) { + return this._children; + } else if (type === null && this.shadowRoot) { + return Array.from(this.shadowRoot.childNodes); + } + return []; + } + getElement(element) { + return TempleRegistry_1.default.get(element); + } + getParentComponent() { + let parent = this.parentElement; + while (parent) { + if (parent instanceof _TempleComponent) { + return parent; + } + parent = parent.parentElement; + } + return null; + } + hasAttribute(name) { + return this.element.hasAttribute(name); + } + on(event, callback) { + this.removeEventListener(event, callback); + this.addEventListener(event, callback); + return this; + } + once(event, callback) { + const unbinder = (e) => { + this.removeEventListener(event, callback); + callback(e); + }; + this.on(event, unbinder); + return this; + } + register(attributes = {}, children4 = []) { + if (TempleRegistry_1.default.has(this)) { + const element = TempleRegistry_1.default.get(this); + element.setAttributes(attributes); + } else { + TempleRegistry_1.default.register(this, attributes); + } + for (const [name, value] of Object.entries(attributes)) { + if (typeof value === "string" || value === true) { + super.setAttribute(name, value === "" || value === name || value === true ? true : value); + } + } + this._children = this._cleanChildren(children4); + this._children.forEach((child) => this.appendChild(child)); + this._virtual = true; + this.connectedCallback(); + } + removeAttribute(name) { + const prev = this.getAttribute(name); + if (this.hasAttribute(name)) { + this.element.removeAttribute(name); + } + if (super.hasAttribute(name)) { + super.removeAttribute(name); + } + if (this._virtual && this.metadata.observed.includes(name)) { + this.attributeChangedCallback(name, prev, null); + } + } + render() { + const parent = this.getParentComponent(); + if (parent && !parent.initiated) { + return; + } else if (this._rendering) { + return; + } + this._rendering = true; + const prev = data_1.default.get("current"); + data_1.default.set("current", this); + if (!this._template) { + this._template = this.template(); + } else { + TempleEmitter_1.default.emit("unmounted", this); + } + const children4 = this._template().filter(Boolean); + const styles = this.styles(); + const mode = styles.length === 0 ? "light" : "shadow"; + const { light, shadow } = this._getChildren(children4, mode); + if (shadow.length === 0) { + this.textContent = ""; + light.forEach((child) => this.appendChild(child)); + } else { + if (!this.shadowRoot) { + this.attachShadow({ mode: "open", delegatesFocus: true }); + } + const style = document.createElement("style"); + style.innerText = styles; + const shadowRoot = this.shadowRoot; + shadowRoot.textContent = ""; + shadowRoot.appendChild(style); + shadow.forEach((child) => shadowRoot.appendChild(child)); + if (light.length) { + this.textContent = ""; + light.forEach((child) => this.appendChild(child)); + } + } + if (prev) { + data_1.default.set("current", prev); + } else { + data_1.default.delete("current"); + } + this._initiated = true; + this._rendering = false; + TempleEmitter_1.default.emit("mounted", this); + return this.shadowRoot ? this.shadowRoot.innerHTML : this.innerHTML; + } + setAttribute(name, value) { + const prev = this.getAttribute(name); + if (value === "" || value === true) { + this.element.setAttribute(name, true); + super.setAttribute(name, ""); + } else if (value === false) { + this.element.setAttribute(name, value); + super.removeAttribute(name); + } else if (typeof value === "string") { + this.element.setAttribute(name, value); + super.setAttribute(name, value); + } else { + this.element.setAttribute(name, value); + } + if (this._virtual && this.metadata.observed.includes(name) && typeof value === "string") { + this.attributeChangedCallback(name, prev, value); + } + } + setAttributes(attributes) { + Object.entries(attributes).forEach(([key, value]) => this.setAttribute(key, value)); + } + unbind(event, callback) { + this.removeEventListener(event, callback); + return this; + } + wait() { + if (document.readyState !== "loading") { + this._update(); + } else { + const next = () => { + this._update(); + TempleEmitter_1.default.unbind("ready", next); + }; + TempleEmitter_1.default.on("ready", next); + } + } + _cleanChildren(children4) { + return Array.from(children4).filter((child) => typeof child !== "undefined").map((child) => typeof child === "string" ? TempleRegistry_1.default.createText(child) : child instanceof TempleElement_1.default ? child.element : child); + } + _getChildren(children4, mode) { + const anyNodes = this._getTemplateNodes(children4); + const lightNodes = this._getTemplateNodes(children4, "light"); + const shadowNodes = this._getTemplateNodes(children4, "shadow"); + const defaultNodes = anyNodes.length > 0 ? anyNodes : children4; + return { + light: lightNodes.length > 0 ? lightNodes : mode === "light" ? defaultNodes : [], + shadow: shadowNodes.length > 0 ? shadowNodes : mode === "shadow" ? defaultNodes : [] + }; + } + _getTemplateNodes(children4, type) { + const template = children4.find((child) => this._isTemplate(child, type)); + if (!template) + return []; + return Array.from(template.childNodes || []); + } + _isTemplate(child, type) { + if (child.nodeName !== "TEMPLATE") + return false; + const template = child; + if (!type) + return !template.hasAttribute("type"); + return type === template.getAttribute("type"); + } + _toNodeList(value) { + if (value instanceof Node) { + return [value]; + } + if (Array.isArray(value)) { + if (value.every((item) => item instanceof Node)) { + return value; + } + } + return [TempleRegistry_1.default.createText(String(value))]; + } + _update() { + if (typeof this._children === "undefined") { + this._children = this._cleanChildren(Array.from(this.childNodes || [])); + } + if (!this._initiated) { + this.render(); + } + } + }; + exports.default = TempleComponent6; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/TempleField.js + var require_TempleField = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/TempleField.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleComponent_1 = __importDefault(require_TempleComponent()); + var TempleField = class extends TempleComponent_1.default { + get field() { + return this._field; + } + constructor() { + super(); + this._field = this.attachInternals(); + } + formAssociatedCallback(form) { + this.emit("formassociate", this); + } + formDisabledCallback(disabled) { + this.emit("formdisable", this); + } + formResetCallback() { + this.emit("formreset", this); + } + }; + TempleField.formAssociated = true; + exports.default = TempleField; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/component.js + var require_component = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/component.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = component; + var Exception_1 = __importDefault(require_Exception()); + var data_1 = __importDefault(require_data()); + function component(component2 = null, nullable = false) { + if (!component2) { + component2 = data_1.default.get("current"); + if (!component2) { + if (!nullable) { + throw Exception_1.default.for("Not called within a Temple component"); + } + return null; + } + } + return component2; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/env.js + var require_env = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/env.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var data_1 = __importDefault(require_data()); + function env2(name) { + const env3 = data_1.default.get("env") || {}; + if (name) { + return env3[name] || null; + } + return env3; + } + exports.default = env2; + } + }); + + // ../../node_modules/@ossph/temple/dist/client/props.js + var require_props = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/props.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = props4; + var component_1 = __importDefault(require_component()); + var data_1 = __importDefault(require_data()); + function props4(pointer = null) { + const component = (0, component_1.default)(pointer, true); + if (typeof component === "string") { + return data_1.default.get("props") || {}; + } + return component ? component.props : {}; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/classnames.js + var require_classnames = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/classnames.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.classlist = classlist2; + exports.default = classnames; + var component_1 = __importDefault(require_component()); + var props_1 = __importDefault(require_props()); + function classlist2(pointer = null) { + var _a; + if (pointer === "body") { + return document.body.classList; + } else if (pointer === "head") { + return document.head.classList; + } else if (pointer === "document") { + return (_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.classList; + } + const component = (0, component_1.default)(pointer); + return component === null || component === void 0 ? void 0 : component.classList; + } + function classnames(pointer = null) { + return (0, props_1.default)(pointer)["class"] || ""; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/children.js + var require_children = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/children.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.innerHTML = innerHTML; + exports.innerText = innerText; + exports.default = children4; + var component_1 = __importDefault(require_component()); + function innerHTML(pointer = null) { + const inner = children4(pointer); + const wrapper = document.createElement("template"); + wrapper.append(...inner.map((child) => child.cloneNode(true))); + return wrapper.innerHTML; + } + function innerText(pointer = null) { + const inner = children4(pointer); + const wrapper = document.createElement("template"); + wrapper.append(...inner.map((child) => child.cloneNode(true))); + return wrapper.innerText; + } + function children4(pointer = null) { + const component = (0, component_1.default)(pointer, true); + return typeof component !== "string" && component ? component.originalChildren || [] : []; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/client/signal.js + var require_signal = __commonJS({ + "../../node_modules/@ossph/temple/dist/client/signal.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.SignalRegistry = void 0; + exports.default = signal; + var component_1 = __importDefault(require_component()); + var Exception_1 = __importDefault(require_Exception()); + var SignalRegistry = class _SignalRegistry { + static observe(component, value) { + const methods = { + getter: () => property.raw, + setter: (value2) => value2 + }; + const listeners = /* @__PURE__ */ new Set(); + const property = { + raw: value, + change(callback) { + listeners.add(callback); + return property; + }, + getter(callback) { + methods.getter = callback; + return property; + }, + setter(callback) { + methods.setter = callback; + return property; + } + }; + Object.defineProperty(property, "value", { + get() { + return methods.getter(); + }, + set(value2) { + const formatted = methods.setter(value2); + const rerender = _SignalRegistry.serialize(formatted) !== _SignalRegistry.serialize(property.raw); + property.raw = formatted; + if (rerender) { + listeners.forEach((listener) => listener(formatted)); + component.render(); + } + } + }); + const observer = this._observers.get(component); + if (!observer) { + this._observers.set(component, { + observed: 1, + values: [property] + }); + } else { + observer.observed++; + observer.values.push(property); + } + return property; + } + static observer(component) { + return this._observers.get(component) || null; + } + static serialize(value) { + return JSON.stringify(value); + } + }; + exports.SignalRegistry = SignalRegistry; + SignalRegistry._observers = /* @__PURE__ */ new Map(); + function signal(value, pointer = null) { + const component = (0, component_1.default)(pointer); + if (!component.initiated) { + return SignalRegistry.observe(component, value); + } + const observer = SignalRegistry.observer(component); + if (!observer) { + throw Exception_1.default.for("Signal state mismatch"); + } + const values = observer.values; + return values[observer.observed++ % observer.values.length]; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleMap.js + var require_StyleMap = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleMap.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.stylemap = stylemap; + function stylemap(styles = {}) { + return new StyleMap(Object.entries(styles)); + } + var StyleMap = class _StyleMap extends Map { + add(property, values) { + if (!this.has(property)) { + this.set(property, []); + } + const styles = this.get(property); + if (typeof values === "string" || typeof values === "number") { + styles.push(values); + } else if (Array.isArray(values)) { + styles.push(...values); + } + return this; + } + clone() { + const stylemap2 = new _StyleMap(); + for (const [key, values] of this.entries()) { + stylemap2.set(key, values.slice()); + } + return stylemap2; + } + replaceAll(search, replace) { + for (const [key, values] of this.entries()) { + this.set(key, values.map((value) => { + if (typeof value === "string") { + return value.replaceAll(search, replace); + } + return value; + })); + } + return this; + } + }; + exports.default = StyleMap; + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleSet.js + var require_StyleSet = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleSet.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.styleset = styleset; + var StyleMap_1 = __importDefault(require_StyleMap()); + function styleset(styles = {}) { + return new StyleSet(Object.entries(styles)); + } + var StyleSet = class extends Map { + add(selector, property, values) { + if (!this.has(selector)) { + this.set(selector, new StyleMap_1.default()); + } + const styles = this.get(selector); + if (typeof values === "string") { + styles.set(property, values.split(" ")); + } else if (Array.isArray(values)) { + styles.set(property, values); + } + return this; + } + map(selector, map) { + this.set(selector, map); + return this; + } + toString() { + const styleset2 = []; + for (const [selector, styles] of this.entries()) { + const definitions = []; + for (const [property, values] of styles.entries()) { + if (property && (values === null || values === void 0 ? void 0 : values.length)) { + definitions.push(`${property}:${values.join(" ")}`); + } + } + if (definitions.length) { + styleset2.push(`${selector}{${definitions.join(";")}}`); + } + } + return styleset2.join(""); + } + }; + exports.default = StyleSet; + } + }); + + // ../../node_modules/@ossph/temple/dist/style/StyleSheet.js + var require_StyleSheet = __commonJS({ + "../../node_modules/@ossph/temple/dist/style/StyleSheet.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.breakpoints = void 0; + exports.stylesheet = stylesheet; + var StyleSet_1 = __importDefault(require_StyleSet()); + exports.breakpoints = { + all: 0, + xl4: 1920, + xl3: 1536, + xl2: 1280, + xl: 1024, + lg: 992, + md: 767, + sm: 420, + xs: 360 + }; + function stylesheet() { + return new StyleSheet(); + } + var StyleSheet = class extends Map { + add(media, selector, property, values) { + if (!this.has(media)) { + this.set(media, new StyleSet_1.default()); + } + const styleset = this.get(media); + styleset.add(selector, property, values); + return this; + } + map(media, selector, map) { + if (!this.has(media)) { + this.set(media, new StyleSet_1.default()); + } + const styleset = this.get(media); + styleset.map(selector, map); + return this; + } + toString() { + var _a; + const stylesheet2 = []; + for (const [media, breakpoint] of Object.entries(exports.breakpoints)) { + const styles = (_a = this.get(media)) === null || _a === void 0 ? void 0 : _a.toString(); + if (!styles) { + continue; + } + if (media === "all") { + stylesheet2.push(styles); + continue; + } + stylesheet2.push(`@media (max-width:${breakpoint}px){${styles}}`); + } + return stylesheet2.join(""); + } + }; + exports.default = StyleSheet; + } + }); + + // ../../node_modules/@ossph/temple/dist/client.js + var require_client = __commonJS({ + "../../node_modules/@ossph/temple/dist/client.js"(exports) { + "use strict"; + var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { + return m[k]; + } }; + } + Object.defineProperty(o, k2, desc); + } : function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + o[k2] = m[k]; + }); + var __setModuleDefault = exports && exports.__setModuleDefault || (Object.create ? function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); + } : function(o, v) { + o["default"] = v; + }); + var __importStar = exports && exports.__importStar || function(mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) { + for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + } + __setModuleDefault(result, mod); + return result; + }; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.StyleSheet = exports.StyleSet = exports.StyleMap = exports.stylesheet = exports.styleset = exports.stylemap = exports.breakpoints = exports.SignalRegistry = exports.TempleException = exports.TempleEmitter = exports.TempleElement = exports.TempleRegistry = exports.TempleComponent = exports.TempleField = exports.TempleDataMap = exports.emitter = exports.signal = exports.innerHTML = exports.innerText = exports.children = exports.classnames = exports.classlist = exports.props = exports.env = exports.data = exports.component = void 0; + var Exception_1 = __importDefault(require_Exception()); + exports.TempleException = Exception_1.default; + var TempleField_1 = __importDefault(require_TempleField()); + exports.TempleField = TempleField_1.default; + var TempleComponent_1 = __importDefault(require_TempleComponent()); + exports.TempleComponent = TempleComponent_1.default; + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + exports.TempleRegistry = TempleRegistry_1.default; + var TempleElement_1 = __importDefault(require_TempleElement()); + exports.TempleElement = TempleElement_1.default; + var TempleEmitter_1 = __importStar(require_TempleEmitter()); + exports.emitter = TempleEmitter_1.default; + Object.defineProperty(exports, "TempleEmitter", { enumerable: true, get: function() { + return TempleEmitter_1.TempleEmitter; + } }); + var component_1 = __importDefault(require_component()); + exports.component = component_1.default; + var data_1 = __importStar(require_data()); + exports.data = data_1.default; + Object.defineProperty(exports, "TempleDataMap", { enumerable: true, get: function() { + return data_1.TempleDataMap; + } }); + var env_1 = __importDefault(require_env()); + exports.env = env_1.default; + var props_1 = __importDefault(require_props()); + exports.props = props_1.default; + var classnames_1 = __importStar(require_classnames()); + exports.classnames = classnames_1.default; + Object.defineProperty(exports, "classlist", { enumerable: true, get: function() { + return classnames_1.classlist; + } }); + var children_1 = __importStar(require_children()); + exports.children = children_1.default; + Object.defineProperty(exports, "innerHTML", { enumerable: true, get: function() { + return children_1.innerHTML; + } }); + Object.defineProperty(exports, "innerText", { enumerable: true, get: function() { + return children_1.innerText; + } }); + var signal_1 = __importStar(require_signal()); + exports.signal = signal_1.default; + Object.defineProperty(exports, "SignalRegistry", { enumerable: true, get: function() { + return signal_1.SignalRegistry; + } }); + var StyleMap_1 = __importStar(require_StyleMap()); + exports.StyleMap = StyleMap_1.default; + Object.defineProperty(exports, "stylemap", { enumerable: true, get: function() { + return StyleMap_1.stylemap; + } }); + var StyleSet_1 = __importStar(require_StyleSet()); + exports.StyleSet = StyleSet_1.default; + Object.defineProperty(exports, "styleset", { enumerable: true, get: function() { + return StyleSet_1.styleset; + } }); + var StyleSheet_1 = __importStar(require_StyleSheet()); + exports.StyleSheet = StyleSheet_1.default; + Object.defineProperty(exports, "stylesheet", { enumerable: true, get: function() { + return StyleSheet_1.stylesheet; + } }); + Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function() { + return StyleSheet_1.breakpoints; + } }); + } + }); + + // ../../node_modules/@ossph/temple/index.js + var require_temple = __commonJS({ + "../../node_modules/@ossph/temple/index.js"(exports, module) { + module.exports = { ...require_client() }; + } + }); + + // ../../node_modules/prismjs/prism.js + var require_prism = __commonJS({ + "../../node_modules/prismjs/prism.js"(exports, module) { + var _self = typeof window !== "undefined" ? window : typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope ? self : {}; + var Prism2 = function(_self2) { + var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i; + var uniqueId = 0; + var plainTextGrammar = {}; + var _2 = { + /** + * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the + * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load + * additional languages or plugins yourself. + * + * By setting this value to `true`, Prism will not automatically highlight all code elements on the page. + * + * You obviously have to change this value before the automatic highlighting started. To do this, you can add an + * empty Prism object into the global scope before loading the Prism script like this: + * + * ```js + * window.Prism = window.Prism || {}; + * Prism.manual = true; + * // add a new +

Hello {name}!

+ `) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-preview", { "class": `basis-half` }, "{ 'class': `basis-half` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h1", {}, "{ }", [ + ...this._toNodeList(_("Hello world!")) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `bg-t-1 m-auto py-40 px-20 tx-center` }, "{ 'class': `bg-t-1 m-auto py-40 px-20 tx-center` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ul", { "class": `flex flex-center list-none p-0 tx-center md-block` }, "{ 'class': `flex flex-center list-none p-0 tx-center md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("li", { "class": `w-third mw-300 md-mw-400 md-w-auto md-m-auto` }, "{ 'class': `w-third mw-300 md-mw-400 md-w-auto md-m-auto` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `p-10` }, "{ 'class': `p-10` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mb-20 tx-upper` }, "{ 'class': `mb-20 tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Expressive Markup")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-16 tx-lh-24` }, "{ 'p': true, 'trim': true, 'class': `tx-16 tx-lh-24` }", [ + import_server.TempleRegistry.createText(` + Any data type as attributes. Easily express logic with + markup directives like if, each, and try catch. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("li", { "class": `w-third mw-300 md-mw-400 md-w-auto md-m-auto md-mt-20` }, "{ 'class': `w-third mw-300 md-mw-400 md-w-auto md-m-auto md-mt-20` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `p-10` }, "{ 'class': `p-10` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mb-20 tx-upper` }, "{ 'class': `mb-20 tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Reactive Signals")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-16 tx-lh-24` }, "{ 'p': true, 'trim': true, 'class': `tx-16 tx-lh-24` }", [ + import_server.TempleRegistry.createText(` + Easily transition from backend logic to reactive states. + No Hydration and no memoization needed. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("li", { "class": `w-third mw-300 md-mw-400 md-w-auto md-m-auto md-mt-20` }, "{ 'class': `w-third mw-300 md-mw-400 md-w-auto md-m-auto md-mt-20` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `p-10` }, "{ 'class': `p-10` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mb-20 tx-upper` }, "{ 'class': `mb-20 tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Bare Metal")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-16 tx-lh-24` }, "{ 'p': true, 'trim': true, 'class': `tx-16 tx-lh-24` }", [ + import_server.TempleRegistry.createText(` + Work with the DOM directly. Import any web components + from any source. Works with Lit, HTMX. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `m-auto mw-960 px-20 py-40` }, "{ 'class': `m-auto mw-960 px-20 py-40` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mt-40 mb-20 tx-center tx-upper` }, "{ 'class': `mt-40 mb-20 tx-center tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Server Setup")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-center tx-lh-24 mb-20` }, "{ 'p': true, 'trim': true, 'class': `tx-center tx-lh-24 mb-20` }", [ + import_server.TempleRegistry.createText(` + Temple can be used with popular server + frameworks in just a few lines of code. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-app", { "title": `Server Example` }, "{ 'title': `Server Example` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "lang": `js`, "numbers": true, "trim": true, "detab": 14 }, "{ 'lang': `js`, 'numbers': true, 'trim': true, 'detab': 14 }", [ + ...this._toNodeList(` + import temple from '@ossph/temple/compiler'; + //make a temple compiler + const compiler = temple(); + //render HTML + const results = compiler.render('./page.dtml'); + `) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mt-40 mb-20 tx-center tx-upper` }, "{ 'class': `mt-40 mb-20 tx-center tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Props")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-center tx-lh-24 mb-20` }, "{ 'p': true, 'trim': true, 'class': `tx-center tx-lh-24 mb-20` }", [ + import_server.TempleRegistry.createText(` + Import your component props and use immediately + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-app", { "title": `Props Example` }, "{ 'title': `Props Example` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex bg-white md-block` }, "{ 'class': `flex bg-white md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 16, "class": `basis-half` }, "{ 'numbers': true, 'trim': true, 'detab': 16, 'class': `basis-half` }", [ + ...this._toNodeList(` + + +

Hello {name}!

+ `) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-preview", { "class": `basis-half` }, "{ 'class': `basis-half` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h1", {}, "{ }", [ + ...this._toNodeList(_("Hello world!")) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mt-40 mb-20 tx-center tx-upper` }, "{ 'class': `mt-40 mb-20 tx-center tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Reactive Signals")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-center tx-lh-24 mb-20` }, "{ 'p': true, 'trim': true, 'class': `tx-center tx-lh-24 mb-20` }", [ + import_server.TempleRegistry.createText(` + Use signals to manage state changes and re-renders. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-app", { "title": `Signal Example` }, "{ 'title': `Signal Example` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex bg-white md-block` }, "{ 'class': `flex bg-white md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 16, "class": `basis-half` }, "{ 'numbers': true, 'trim': true, 'detab': 16, 'class': `basis-half` }", [ + ...this._toNodeList(` + + +

Hello {name.value}

+ `) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-preview", { "class": `basis-half` }, "{ 'class': `basis-half` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h1", {}, "{ }", [ + ...this._toNodeList(_("Hello world!")) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mt-40 mb-20 tx-center tx-upper` }, "{ 'class': `mt-40 mb-20 tx-center tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Components and Templates")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-center tx-lh-24 mb-20` }, "{ 'p': true, 'trim': true, 'class': `tx-center tx-lh-24 mb-20` }", [ + import_server.TempleRegistry.createText(` + Import components and templates for reusability. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-app", { "title": `Import Example` }, "{ 'title': `Import Example` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex bg-white md-block` }, "{ 'class': `flex bg-white md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 16, "class": `basis-half` }, "{ 'numbers': true, 'trim': true, 'detab': 16, 'class': `basis-half` }", [ + ...this._toNodeList(` + + + + Hello + `) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "class": `basis-half b-t-1 b-solid by-0 bl-1 br-0 md-b-0`, "trim": true, "detab": 16 }, "{ 'class': `basis-half b-t-1 b-solid by-0 bl-1 br-0 md-b-0`, 'trim': true, 'detab': 16 }", [ + ...this._toNodeList(` + + +

{children} {name}

+ `) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `mt-40 mb-20 tx-center tx-upper` }, "{ 'class': `mt-40 mb-20 tx-center tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Conditionals and Iterations")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true, "class": `tx-center tx-lh-24 mb-20` }, "{ 'p': true, 'trim': true, 'class': `tx-center tx-lh-24 mb-20` }", [ + import_server.TempleRegistry.createText(` + Case for conditions and iterations in an expressive way. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-app", { "title": `Conditional + Iteration Example` }, "{ 'title': `Conditional + Iteration Example` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex bg-white md-block` }, "{ 'class': `flex bg-white md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "numbers": true, "trim": true, "detab": 16, "class": `basis-half` }, "{ 'numbers': true, 'trim': true, 'detab': 16, 'class': `basis-half` }", [ + ...this._toNodeList(` + + + +

Hello {name}

+ + `) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("ide-code", { "class": `basis-half b-t-1 b-solid by-0 bl-1 br-0 md-b-0`, "trim": true, "detab": 16 }, "{ 'class': `basis-half b-t-1 b-solid by-0 bl-1 br-0 md-b-0`, 'trim': true, 'detab': 16 }", [ + ...this._toNodeList(` + + + `) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `m-auto px-20 py-40 tx-center bg-h-cccccc` }, "{ 'class': `m-auto px-20 py-40 tx-center bg-h-cccccc` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `tx-h-242424 tx-30 tx-upper` }, "{ 'class': `tx-h-242424 tx-30 tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Works With Popular Server Frameworks")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex flex-center flex-wrap mx-auto mt-40 mb-0 sm-block` }, "{ 'class': `flex flex-center flex-wrap mx-auto mt-40 mb-0 sm-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `https://expressjs.com/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `https://expressjs.com/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://upload.wikimedia.org/wikipedia/commons/6/64/Expressjs.png`, "alt": `Express` }, "{ 'class': `h-60`, 'src': `https://upload.wikimedia.org/wikipedia/commons/6/64/Expressjs.png`, 'alt': `Express` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `https://fastify.dev/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `https://fastify.dev/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://upload.wikimedia.org/wikipedia/commons/0/0a/Fastify_logo.svg`, "alt": `Fastify` }, "{ 'class': `h-60`, 'src': `https://upload.wikimedia.org/wikipedia/commons/0/0a/Fastify_logo.svg`, 'alt': `Fastify` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `https://hapi.dev/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `https://hapi.dev/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://raw.githubusercontent.com/hapijs/assets/master/images/hapi.png`, "alt": `Hapi` }, "{ 'class': `h-60`, 'src': `https://raw.githubusercontent.com/hapijs/assets/master/images/hapi.png`, 'alt': `Hapi` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `https://koajs.com/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `https://koajs.com/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://cdn.icon-icons.com/icons2/2699/PNG/512/koajs_logo_icon_168379.png`, "alt": `Koa` }, "{ 'class': `h-60`, 'src': `https://cdn.icon-icons.com/icons2/2699/PNG/512/koajs_logo_icon_168379.png`, 'alt': `Koa` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `https://nestjs.com/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `https://nestjs.com/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://cdn.icon-icons.com/icons2/2699/PNG/512/nestjs_logo_icon_169927.png`, "alt": `NestJS` }, "{ 'class': `h-60`, 'src': `https://cdn.icon-icons.com/icons2/2699/PNG/512/nestjs_logo_icon_169927.png`, 'alt': `NestJS` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `block basis-third mb-20`, "href": `http://restify.com/`, "target": `_blank` }, "{ 'class': `block basis-third mb-20`, 'href': `http://restify.com/`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "class": `h-60`, "src": `https://raw.githubusercontent.com/restify/node-restify/gh-images/logo/png/restify_logo_black_transp_288x288.png?raw=true`, "alt": `Restify` }, "{ 'class': `h-60`, 'src': `https://raw.githubusercontent.com/restify/node-restify/gh-images/logo/png/restify_logo_black_transp_288x288.png?raw=true`, 'alt': `Restify` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `bg-t-1 m-auto py-40 px-20` }, "{ 'class': `bg-t-1 m-auto py-40 px-20` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `tx-26 tx-center` }, "{ 'class': `tx-26 tx-center` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Temple Loves Developers!")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `flex flex-wrap md-block` }, "{ 'class': `flex flex-wrap md-block` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Joff Tiquez`, "handle": `@jrtiquez`, "href": `https://twitter.com/jrtiquez`, "src": `https://github.com/jofftiquez.png` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Joff Tiquez`, 'handle': `@jrtiquez`, 'href': `https://twitter.com/jrtiquez`, 'src': `https://github.com/jofftiquez.png` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`Im a vue developer. No need for this. OSSPH does not support this project.`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Primeagen`, "handle": `@theprimeagen`, "href": `https://twitter.com/ThePrimeagen`, "src": `https://pbs.twimg.com/profile_images/1759330620160049152/2i_wkOoK_400x400.jpg` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Primeagen`, 'handle': `@theprimeagen`, 'href': `https://twitter.com/ThePrimeagen`, 'src': `https://pbs.twimg.com/profile_images/1759330620160049152/2i_wkOoK_400x400.jpg` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`Temple? Never heard of it...`, false), + import_server.TempleRegistry.createElement("br", {}, "{ }"), + import_server.TempleRegistry.createText(`"The Name..."`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Kristian Quirapas`, "handle": `@YourCompanyCTO`, "href": `https://twitter.com/YourCompanyCTO`, "src": `https://avatars.githubusercontent.com/u/85150796?v=4` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Kristian Quirapas`, 'handle': `@YourCompanyCTO`, 'href': `https://twitter.com/YourCompanyCTO`, 'src': `https://avatars.githubusercontent.com/u/85150796?v=4` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`Temple is good news for Node developers. I'm a rust developer so it don't matter to me.`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Drizzle Team`, "handle": `@drizzle.team`, "href": `https://twitter.com/DrizzleORM`, "src": `https://pbs.twimg.com/profile_images/1767809210060877824/mAtEmNk0_400x400.jpg` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Drizzle Team`, 'handle': `@drizzle.team`, 'href': `https://twitter.com/DrizzleORM`, 'src': `https://pbs.twimg.com/profile_images/1767809210060877824/mAtEmNk0_400x400.jpg` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`Temple copied this section from us. We are the original.`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Chris B`, "handle": `@cblanquera`, "href": `https://twitter.com/cblanquera`, "src": `https://avatars.githubusercontent.com/u/120378?v=4` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Chris B`, 'handle': `@cblanquera`, 'href': `https://twitter.com/cblanquera`, 'src': `https://avatars.githubusercontent.com/u/120378?v=4` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`After creating the Temple project, I am really excited to get back to ReactJS.`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("tweet-box", { "class": `block basis-third lg-basis-half`, "name": `Theo`, "handle": `@t3dotgg`, "href": `https://twitter.com/t3dotgg`, "src": `https://yt3.googleusercontent.com/4NapxEtLcHQ6wN2zA_DMmkOk47RFb_gy6sjSmUZGg_ARHjlIUjFsrNFddrcKMkTYpBNxCp3J=s160-c-k-c0x00ffffff-no-rj` }, "{ 'class': `block basis-third lg-basis-half`, 'name': `Theo`, 'handle': `@t3dotgg`, 'href': `https://twitter.com/t3dotgg`, 'src': `https://yt3.googleusercontent.com/4NapxEtLcHQ6wN2zA_DMmkOk47RFb_gy6sjSmUZGg_ARHjlIUjFsrNFddrcKMkTYpBNxCp3J=s160-c-k-c0x00ffffff-no-rj` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("p", {}, "{ }", [ + import_server.TempleRegistry.createText(`Temple? no thanks. Keep your stack front end. App router for life.`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("section", { "class": `m-auto py-40 px-20 tx-center` }, "{ 'class': `m-auto py-40 px-20 tx-center` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `tx-26 mb-20` }, "{ 'class': `tx-26 mb-20` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("What are you waiting for?")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("element-button", { "primary": true, "xl": true, "rounded": true, "class": `inline-block`, "style": `margin-right:10px;`, "href": `/temple/docs/getting-started.html` }, "{ 'primary': true, 'xl': true, 'rounded': true, 'class': `inline-block`, 'style': `margin-right:10px;`, 'href': `/temple/docs/getting-started.html` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Get Started")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("element-button", { "secondary": true, "xl": true, "rounded": true, "class": `inline-block`, "href": `/temple/docs/index.html` }, "{ 'secondary': true, 'xl': true, 'rounded': true, 'class': `inline-block`, 'href': `/temple/docs/index.html` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...this._toNodeList(_("Read the Docs")), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` +`, false) + ]) + ]; + } + }; + return __toCommonJS(pages_exports); +})(); diff --git a/docs/build/server/e3f8653650902fcc262b.js b/docs/build/server/e3f8653650902fcc262b.js new file mode 100644 index 0000000..bc64669 --- /dev/null +++ b/docs/build/server/e3f8653650902fcc262b.js @@ -0,0 +1,690 @@ +var TempleAPI = (() => { + var __create = Object.create; + var __defProp = Object.defineProperty; + var __getOwnPropDesc = Object.getOwnPropertyDescriptor; + var __getOwnPropNames = Object.getOwnPropertyNames; + var __getProtoOf = Object.getPrototypeOf; + var __hasOwnProp = Object.prototype.hasOwnProperty; + var __commonJS = (cb, mod) => function __require() { + return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; + }; + var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); + }; + var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; + }; + var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( + // If the importer is in node compatibility mode or this is not an ESM + // file that has been converted to a CommonJS file using a Babel- + // compatible transform (i.e. "__esModule" has not been set), then set + // "default" to the CommonJS "module.exports" for node compatibility. + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod + )); + var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); + + // ../../node_modules/@ossph/temple/dist/Exception.js + var require_Exception = __commonJS({ + "../../node_modules/@ossph/temple/dist/Exception.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleException = class extends Error { + static for(message, ...values) { + values.forEach(function(value) { + message = message.replace("%s", value); + }); + return new this(message); + } + static forErrorsFound(errors) { + const exception = new this("Invalid Parameters"); + exception.errors = errors; + return exception; + } + static require(condition, message, ...values) { + if (!condition) { + for (const value of values) { + message = message.replace("%s", value); + } + throw new this(message); + } + } + constructor(message, code = 500) { + super(); + this.errors = {}; + this.start = 0; + this.end = 0; + this.message = message; + this.name = this.constructor.name; + this.code = code; + } + withCode(code) { + this.code = code; + return this; + } + withPosition(start, end) { + this.start = start; + this.end = end; + return this; + } + toJSON() { + return { + error: true, + code: this.code, + message: this.message + }; + } + }; + exports.default = TempleException; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleCollection.js + var require_TempleCollection = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleCollection.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleCollection = class { + get length() { + return this._elements.size; + } + constructor(elements = []) { + this._elements = /* @__PURE__ */ new Set(); + elements.forEach((element) => this._elements.add(element)); + } + add(element) { + this._elements.add(element); + } + toArray() { + return Array.from(this._elements); + } + toString() { + return Array.from(this._elements).filter(Boolean).map((child) => child.toString()).join(""); + } + }; + exports.default = TempleCollection; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/data.js + var require_data = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/data.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var data = /* @__PURE__ */ new Map(); + exports.default = data; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleText.js + var require_TempleText = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleText.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleText = class { + get value() { + return this._escape ? this._value.replace(/&/g, "&").replace(//g, ">") : this._value; + } + constructor(value, escape = false) { + this._escape = escape; + this._value = value; + } + toString() { + return this.value; + } + }; + exports.default = TempleText; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleElement.js + var require_TempleElement = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleElement.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleCollection_1 = __importDefault(require_TempleCollection()); + var selfClosingTags = [ + "area", + "base", + "br", + "col", + "embed", + "hr", + "img", + "input", + "link", + "meta", + "param", + "source", + "track", + "wbr" + ]; + var TempleElement2 = class { + get attributes() { + return this._attributes; + } + get children() { + return this._children; + } + get name() { + return this._name; + } + get props() { + return this._props; + } + constructor(name, attributes = {}, props2 = "", children = []) { + this._attributes = {}; + this._name = name; + this._attributes = attributes; + this._props = props2; + this._children = new TempleCollection_1.default(children); + } + toString() { + const entries = Object.entries(this._attributes); + const attributes = entries.length > 0 ? " " + entries.map(([key, value]) => { + if (typeof value === "string" && !/["<>\n]/.test(value)) { + return `${key}="${value}"`; + } else if (typeof value === "boolean") { + return value ? key : ""; + } + }).join(" ") : ""; + if (selfClosingTags.includes(this._name)) { + return `<${this._name}${attributes} />`; + } + const children = this._children.toString(); + return `<${this._name}${attributes}>${children}`; + } + }; + exports.default = TempleElement2; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleRegistry.js + var require_TempleRegistry = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleRegistry.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var TempleText_1 = __importDefault(require_TempleText()); + var TempleElement_1 = __importDefault(require_TempleElement()); + var TempleRegistry2 = class { + static render(markup) { + return markup.filter(Boolean).map((child) => child.toString()).join(""); + } + static registry(markup, registry = /* @__PURE__ */ new Set()) { + markup.forEach((node) => { + if (node instanceof TempleElement_1.default) { + if (!["html", "head", "body"].includes(node.name)) { + registry.add(node); + } + if (node.name !== "head" && node.children.length > 0) { + this.registry(node.children.toArray(), registry); + } + } + }); + return registry; + } + static createElement(name, attributes, props2, children = []) { + return new TempleElement_1.default(name, attributes, props2, children); + } + static createText(value, escape = true) { + return new TempleText_1.default(value, escape); + } + }; + exports.default = TempleRegistry2; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleDocument.js + var require_TempleDocument = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleDocument.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var Exception_1 = __importDefault(require_Exception()); + var data_1 = __importDefault(require_data()); + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + var TempleDocument2 = class { + bindings() { + const registry = TempleRegistry_1.default.registry(this.template()); + const bindings = Array.from(registry.values()).map((element, id) => { + return element.props !== "{ }" ? `'${id}': ${element.props}` : ""; + }).filter((binding) => binding !== "").join(", "); + return `{ ${bindings} }`; + } + render(props2 = {}) { + data_1.default.set("props", props2 || {}); + data_1.default.set("env", Object.assign(Object.assign({}, process.env || {}), { BUILD_ID: this.id(), APP_DATA: btoa(JSON.stringify(Object.assign(Object.assign({}, Object.fromEntries(data_1.default.entries())), { env: Object.assign(Object.assign({}, Object.fromEntries(Object.entries(process.env || {}).filter((entry) => entry[0].startsWith("PUBLIC_")))), { BUILD_ID: this.id() }) }))) })); + const children = this.template(); + let document = TempleRegistry_1.default.render(children).trim(); + if (!document.toLowerCase().startsWith(" tag."); + } + return ` +${document}`; + } + _toNodeList(value) { + if (typeof value === "object" && typeof value.nodeType === "number") { + return [value]; + } + if (Array.isArray(value)) { + if (value.every((item) => typeof item === "object" && typeof item.nodeType === "number")) { + return value; + } + } + return [TempleRegistry_1.default.createText(String(value))]; + } + }; + exports.default = TempleDocument2; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/TempleEmitter.js + var require_TempleEmitter = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/TempleEmitter.js"(exports) { + "use strict"; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.TempleEmitter = void 0; + var TempleEmitter = class { + emit(event, target) { + return this; + } + on(event, callback) { + return this; + } + once(event, callback) { + return this; + } + unbind(event, callback) { + return this; + } + }; + exports.TempleEmitter = TempleEmitter; + var emitter = new TempleEmitter(); + exports.default = emitter; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/env.js + var require_env = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/env.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + var data_1 = __importDefault(require_data()); + function env2(name) { + const env3 = data_1.default.get("env") || {}; + if (name) { + return env3[name] || null; + } + return env3; + } + exports.default = env2; + } + }); + + // ../../node_modules/@ossph/temple/dist/server/props.js + var require_props = __commonJS({ + "../../node_modules/@ossph/temple/dist/server/props.js"(exports) { + "use strict"; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.default = props2; + var data_1 = __importDefault(require_data()); + function props2() { + return data_1.default.get("props") || {}; + } + } + }); + + // ../../node_modules/@ossph/temple/dist/server.js + var require_server = __commonJS({ + "../../node_modules/@ossph/temple/dist/server.js"(exports) { + "use strict"; + var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { + return m[k]; + } }; + } + Object.defineProperty(o, k2, desc); + } : function(o, m, k, k2) { + if (k2 === void 0) k2 = k; + o[k2] = m[k]; + }); + var __setModuleDefault = exports && exports.__setModuleDefault || (Object.create ? function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); + } : function(o, v) { + o["default"] = v; + }); + var __importStar = exports && exports.__importStar || function(mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) { + for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + } + __setModuleDefault(result, mod); + return result; + }; + var __importDefault = exports && exports.__importDefault || function(mod) { + return mod && mod.__esModule ? mod : { "default": mod }; + }; + Object.defineProperty(exports, "__esModule", { value: true }); + exports.TempleText = exports.TempleException = exports.TempleEmitter = exports.TempleElement = exports.TempleRegistry = exports.TempleDocument = exports.TempleCollection = exports.props = exports.emitter = exports.env = exports.data = void 0; + var Exception_1 = __importDefault(require_Exception()); + exports.TempleException = Exception_1.default; + var TempleCollection_1 = __importDefault(require_TempleCollection()); + exports.TempleCollection = TempleCollection_1.default; + var TempleDocument_1 = __importDefault(require_TempleDocument()); + exports.TempleDocument = TempleDocument_1.default; + var TempleRegistry_1 = __importDefault(require_TempleRegistry()); + exports.TempleRegistry = TempleRegistry_1.default; + var TempleElement_1 = __importDefault(require_TempleElement()); + exports.TempleElement = TempleElement_1.default; + var TempleEmitter_1 = __importStar(require_TempleEmitter()); + exports.emitter = TempleEmitter_1.default; + Object.defineProperty(exports, "TempleEmitter", { enumerable: true, get: function() { + return TempleEmitter_1.TempleEmitter; + } }); + var TempleText_1 = __importDefault(require_TempleText()); + exports.TempleText = TempleText_1.default; + var data_1 = __importDefault(require_data()); + exports.data = data_1.default; + var env_1 = __importDefault(require_env()); + exports.env = env_1.default; + var props_1 = __importDefault(require_props()); + exports.props = props_1.default; + } + }); + + // ../../node_modules/@ossph/temple/server.js + var require_server2 = __commonJS({ + "../../node_modules/@ossph/temple/server.js"(exports, module) { + module.exports = { ...require_server() }; + } + }); + + // temple-document-server-resolver:C:\Users\msu-wone\Documents\@Shoppable (Intern Dev Tasks)\Temple Dev\Push\temple\packages\temple-web\src\pages\500.dtml + var __exports = {}; + __export(__exports, { + default: () => N500_e3f8653650902fcc262b + }); + var import_server = __toESM(require_server2()); + var import_server2 = __toESM(require_server2()); + + // src/components/i18n/index.ts + var _ = function(phrase, ...variables) { + let translation = translate(phrase); + for (let i = 0; i < variables.length; i++) { + translation = translation.replace("%s", String(variables[i])); + } + return translation; + }; + var translate = function(phrase) { + return phrase; + }; + + // temple-document-server-resolver:C:\Users\msu-wone\Documents\@Shoppable (Intern Dev Tasks)\Temple Dev\Push\temple\packages\temple-web\src\pages\500.dtml + var N500_e3f8653650902fcc262b = class extends import_server.TempleDocument { + id() { + return "e3f8653650902fcc262b"; + } + styles() { + return `@temple theme; + @temple reset; + @temple fouc-opacity; + @temple utilities;`; + } + template() { + const url = "/temple/500.html"; + const title = _("Oops... - Temple - The reactive web component template engine."); + const description = _("Temple is a template engine hat generates web components and support reactivity."); + const { error = "Unknown Error" } = (0, import_server2.props)(); + return [ + import_server.TempleRegistry.createText(` +`, false), + import_server.TempleRegistry.createElement("html", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + ...[ + import_server.TempleRegistry.createElement("head", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "charset": `utf-8` }, "{ 'charset': `utf-8` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `viewport`, "content": `width=device-width, initial-scale=1` }, "{ 'name': `viewport`, 'content': `width=device-width, initial-scale=1` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("title", {}, "{ }", [ + ...this._toNodeList(title) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `description`, "content": description }, "{ 'name': `description`, 'content': description }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "property": `og:title`, "content": title }, "{ 'property': `og:title`, 'content': title }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "property": `og:description`, "content": description }, "{ 'property': `og:description`, 'content': description }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "property": `og:image`, "content": `https://ossphilippines.github.io/temple/temple-logo.png` }, "{ 'property': `og:image`, 'content': `https://ossphilippines.github.io/temple/temple-logo.png` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "property": `og:url`, "content": `https://ossphilippines.github.io/temple${url}` }, "{ 'property': `og:url`, 'content': `https://ossphilippines.github.io/temple${url}` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "property": `og:type`, "content": `website` }, "{ 'property': `og:type`, 'content': `website` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `twitter:card`, "content": `summary` }, "{ 'name': `twitter:card`, 'content': `summary` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `twitter:site`, "content": `@OSSPhilippines` }, "{ 'name': `twitter:site`, 'content': `@OSSPhilippines` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `twitter:title`, "content": title }, "{ 'name': `twitter:title`, 'content': title }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `twitter:description`, "content": description }, "{ 'name': `twitter:description`, 'content': description }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("meta", { "name": `twitter:image`, "content": `https://ossphilippines.github.io/temple/temple-logo.png` }, "{ 'name': `twitter:image`, 'content': `https://ossphilippines.github.io/temple/temple-logo.png` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `favicon`, "href": `/temple/favicon.ico` }, "{ 'rel': `favicon`, 'href': `/temple/favicon.ico` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `shortcut icon`, "type": `image/png`, "href": `/temple/favicon.png` }, "{ 'rel': `shortcut icon`, 'type': `image/png`, 'href': `/temple/favicon.png` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css` }, "{ 'rel': `stylesheet`, 'type': `text/css`, 'href': `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `stylesheet`, "media": `(prefers-color-scheme:light)`, "href": `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css` }, "{ 'rel': `stylesheet`, 'media': `(prefers-color-scheme:light)`, 'href': `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `stylesheet`, "media": `(prefers-color-scheme:dark)`, "href": `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/dark.css` }, "{ 'rel': `stylesheet`, 'media': `(prefers-color-scheme:dark)`, 'href': `https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/dark.css` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `/temple/styles/global.css` }, "{ 'rel': `stylesheet`, 'type': `text/css`, 'href': `/temple/styles/global.css` }"), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("link", { "rel": `stylesheet`, "type": `text/css`, "href": `/temple/build/client/${(0, import_server2.env)("BUILD_ID")}.css` }, "{ 'rel': `stylesheet`, 'type': `text/css`, 'href': `/temple/build/client/${env('BUILD_ID')}.css` }"), + import_server.TempleRegistry.createText(` + + `, false), + import_server.TempleRegistry.createElement("script", { "data-app": (0, import_server2.env)("APP_DATA"), "src": `/temple/build/client/${(0, import_server2.env)("BUILD_ID")}.js` }, "{ 'data-app': env('APP_DATA'), 'src': `/temple/build/client/${env('BUILD_ID')}.js` }"), + import_server.TempleRegistry.createText(` + `, false), + ...!!((0, import_server2.env)("NODE_ENV") === "development") ? [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("script", { "src": `/dev.js` }, "{ 'src': `/dev.js` }"), + import_server.TempleRegistry.createText(` + `, false) + ] : [], + import_server.TempleRegistry.createText(` +`, false) + ]) + ], + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("body", { "class": `dark bg-t-0 tx-t-1 tx-arial` }, "{ 'class': `dark bg-t-0 tx-t-1 tx-arial` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("panel-layout", {}, "{ }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("header", {}, "{ }", [ + ...[ + import_server.TempleRegistry.createElement("menu", { "class": `flex flex-center-y px-20 py-15 m-0 bg-t-1` }, "{ 'class': `flex flex-center-y px-20 py-15 m-0 bg-t-1` }", [ + import_server.TempleRegistry.createText(` + `, false), + ...!!(url !== "/temple/index.html" && url !== "/temple/500.html") ? [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i", { "class": `fas fa-fw fa-bars cursor-pointer py-5 pr-10 none md-inline-block tx-t-1`, "click": toggle }, "{ 'class': `fas fa-fw fa-bars cursor-pointer py-5 pr-10 none md-inline-block tx-t-1`, 'click': toggle }", []), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `flex-grow` }, "{ 'class': `flex-grow` }", []), + import_server.TempleRegistry.createText(` + `, false) + ] : true ? [ + , + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "href": `/temple` }, "{ 'href': `/temple` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("img", { "alt": `Temple Logo`, "class": `h-26 mr-10`, "src": `/temple/temple-icon.png` }, "{ 'alt': `Temple Logo`, 'class': `h-26 mr-10`, 'src': `/temple/temple-icon.png` }"), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h3", { "class": `flex-grow tx-upper` }, "{ 'class': `flex-grow tx-upper` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `tx-white`, "href": `/temple` }, "{ 'class': `tx-white`, 'href': `/temple` }", [ + import_server.TempleRegistry.createText(`Temple`, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ] : [], + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("nav", { "class": `flex flex-center-y` }, "{ 'class': `flex flex-center-y` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `tx-white`, "href": `/temple/docs/index.html` }, "{ 'class': `tx-white`, 'href': `/temple/docs/index.html` }", [ + import_server.TempleRegistry.createText(`Docs`, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `tx-t-1 tx-5xl ml-10`, "href": `https://github.com/OSSPhilippines/temple`, "target": `_blank` }, "{ 'class': `tx-t-1 tx-5xl ml-10`, 'href': `https://github.com/OSSPhilippines/temple`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i", { "class": `fab fa-github` }, "{ 'class': `fab fa-github` }", []), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `bg-h-cb3837 pill tx-t-1 tx-lg ml-5 p-5 tx-center`, "href": `https://www.npmjs.com/package/@ossph/temple`, "target": `_blank` }, "{ 'class': `bg-h-cb3837 pill tx-t-1 tx-lg ml-5 p-5 tx-center`, 'href': `https://www.npmjs.com/package/@ossph/temple`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i", { "class": `fab fa-npm text-white` }, "{ 'class': `fab fa-npm text-white` }", []), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("a", { "class": `bg-h-7289da pill tx-t-1 tx-lg ml-5 p-5 tx-center`, "href": `https://discord.gg/open-source-software-ph-905496362982981723`, "target": `_blank` }, "{ 'class': `bg-h-7289da pill tx-t-1 tx-lg ml-5 p-5 tx-center`, 'href': `https://discord.gg/open-source-software-ph-905496362982981723`, 'target': `_blank` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i", { "class": `fab fa-discord text-white` }, "{ 'class': `fab fa-discord text-white` }", []), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` +`, false) + ]) + ] + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("main", { "class": `scroll-auto` }, "{ 'class': `scroll-auto` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("div", { "class": `p-20 w-calc-full-40` }, "{ 'class': `p-20 w-calc-full-40` }", [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("h1", { "class": `pt-10 pb-20` }, "{ 'class': `pt-10 pb-20` }", [ + ...this._toNodeList(_("Oops...")) + ]), + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("i18n-translate", { "p": true, "trim": true }, "{ 'p': true, 'trim': true }", [ + import_server.TempleRegistry.createText(` + Something went wrong. Please try again later. + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false), + ...!!error ? [ + import_server.TempleRegistry.createText(` + `, false), + import_server.TempleRegistry.createElement("pre", { "class": `bg-black courier tx-lh-22 tx-word-wrap p-10 scroll-x-auto tx-prewrap` }, "{ 'class': `bg-black courier tx-lh-22 tx-word-wrap p-10 scroll-x-auto tx-prewrap` }", [ + ...this._toNodeList(error) + ]), + import_server.TempleRegistry.createText(` + `, false) + ] : [], + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` + `, false) + ]), + import_server.TempleRegistry.createText(` +`, false) + ]) + ]; + } + }; + return __toCommonJS(__exports); +})(); diff --git a/docs/index.html b/docs/index.html index 45e8b33..920cc10 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,21 +17,25 @@ - + + + - + - + + + - + - +
Temple Logo -

+

Temple

@@ -47,22 +51,22 @@

-

 - +
 +
Temple Logo

Temple

The reactive web component template engine. - + Get Started - - + + Read the Docs - +
-
+
Temple is a modern HTML markup language and a server first template engine with a built-in parser/compiler that @@ -89,9 +93,9 @@

Hello world!

    -
  • +
  • -

    +

    Expressive Markup

    @@ -100,9 +104,9 @@

    • -
  • +
  • -

    +

    Reactive Signals

    @@ -111,9 +115,9 @@

    • -
  • +
  • -

    +

    Bare Metal

    @@ -124,8 +128,8 @@

-
-

+
+

Server Setup

@@ -142,7 +146,7 @@

-

+

Props

@@ -168,7 +172,7 @@

Hello world!

-

+

Reactive Signals

@@ -195,7 +199,7 @@

Hello world!

-

+

Components and Templates

@@ -211,7 +215,7 @@

</script> <my-heading {name}>Hello</my-heading> - + <!-- my-heading.html --> <script> import { props } from '@ossph/temple'; @@ -222,7 +226,7 @@

-

+

Conditionals and Iterations

@@ -240,7 +244,7 @@

<h1>Hello {name}</h1> </if> - + <script> const list = [ 'a', 'b', 'c' ]; </script> @@ -254,7 +258,7 @@

-

+

Works With Popular Server Frameworks

@@ -307,15 +311,14 @@

What are you waiting for?

- + Get Started - - + + Read the Docs - +
-
- +

\ No newline at end of file diff --git a/packages/temple-dev/src/RefreshServer.ts b/packages/temple-dev/src/RefreshServer.ts index a53251e..01baec0 100644 --- a/packages/temple-dev/src/RefreshServer.ts +++ b/packages/temple-dev/src/RefreshServer.ts @@ -1,4 +1,3 @@ - import type { FSWatcher } from 'chokidar'; import type { Request, Response } from '@ossph/temple/compiler'; import type { ServerOptions, OptionIgnore } from './types'; @@ -89,7 +88,7 @@ export default class RefreshServer { } /** - * Tell all the browsers to reload their page + * Tell all the browsers to reload their page or hot update components */ public async refresh(filePath: string) { const extname = path.extname(filePath); @@ -99,133 +98,92 @@ export default class RefreshServer { const updates: Record = {}; const params = { filePath, updates }; - //pre emit file change await this._emitter.waitFor('dev-file-change', params); - //Lots of things to figure out for hot refresh... - // - What file changed? (filePath) - // - What document imports this component? - // - What components import this file? const absolute = path.resolve(this._cwd, filePath); //loop through the registry of loaded documents for (const builder of this._registry.values()) { const document = builder.document; - // - What document imports this component? - //if the document is the same as the changed file + + // If the document itself changed if (document.absolute === absolute) { const params = { filePath, document, updates }; - //pre emit document update await this._emitter.waitFor('dev-update-document', params); - //just reload - updates[document.id] = [ 'window.location.reload();' ]; - //post emit document updated + + // Try to hot update the document if possible + try { + const script = await update(document, { + extname: this._extname, + tsconfig: this._tsconfig + }); + updates[document.id] = [script]; + } catch(error) { + // Fallback to full reload if hot update fails + updates[document.id] = ['window.location.reload();']; + } + await this._emitter.waitFor('dev-updated-document', params); continue; } - // - What components import this file? - //get any dependencies that import this file + + // Handle component dependencies let dependants: { component: Component, type: string }[] = []; - try { //to get dependants + try { dependants = dependantsOf(absolute, document); } catch(error) { - //an error could be caused if the filepath of a dependant - //does not exist, so we just add an error message to the - //updates this will be sent to the client browser to notify - //the developer of the error - updates[document.id] = [ errorMessage(error as Error) ]; - } - - //if there are no dependants, skip - if (dependants.length === 0) { + updates[document.id] = [errorMessage(error as Error)]; continue; } + + if (dependants.length === 0) continue; updates[document.id] = []; for (const dependant of dependants) { - //if the filePath was imported as a component - if (dependant.type === 'component') { - //update the imported component - const component = new Component(absolute, { - brand: document.brand, - cwd: document.cwd, - fs: document.fs - }); - let script: string; - try { //to generate a script to update the component - script = await update(component, { - extname: this._extname, - tsconfig: this._tsconfig - }); - } catch(error) { - //notify the developer via client browser of the error - script = errorMessage(error as Error); - } - //event params - const params = { filePath, document, component, updates }; - //pre emit component update + const targetComponent = dependant.type === 'component' + ? new Component(absolute, { + brand: document.brand, + cwd: document.cwd, + fs: document.fs + }) + : dependant.component.type === 'component' + ? dependant.component + : null; + + if (targetComponent) { + const params = { filePath, document, component: targetComponent, updates }; await this._emitter.waitFor('dev-update-component', params); - //add a script to the updates - updates[document.id].push(script); - //post emit component updated - await this._emitter.waitFor('dev-updated-component', params); - continue; - //if the parent component is a component - } else if (dependant.component.type === 'component') { - const { component } = dependant; - let script: string; - try { //to generate a script to update the component - //the filePath was imported as a template - // or file, update the parent component - script = await update(component, { + + try { + const script = await update(targetComponent, { extname: this._extname, tsconfig: this._tsconfig }); + updates[document.id].push(script); } catch(error) { - //notify the developer via client browser of the error - script = errorMessage(error as Error); + updates[document.id].push(errorMessage(error as Error)); } - //event params - const params = { filePath, document, component, updates }; - //pre emit component update - await this._emitter.waitFor('dev-update-component', params); - //add a script to the updates - updates[document.id].push(script); - //post emit component updated await this._emitter.waitFor('dev-updated-component', params); - continue; } } - //if there are no updates for the document + + // Only reload if no hot updates were possible if (updates[document.id].length === 0) { - //event params const params = { filePath, document, updates }; - //pre emit document update await this._emitter.waitFor('dev-update-document', params); - //just reload updates[document.id].push('window.location.reload();'); - //post emit document updated await this._emitter.waitFor('dev-updated-document', params); } - }; + } - //send out the updates to all the clients + // Send updates to clients this._clients.forEach(res => { res.write("event: refresh\n"); res.write(`data: ${JSON.stringify(updates)}\n\n`); - //if this works, then the browser will reload - //causing the req.close event to be triggered - //and the client will be removed from the list - //implemented in wait() - - //this is also a provision for a better - //implementation of browser refresh }); - //post emit file changed await this._emitter.waitFor('dev-file-changed', params); - return this; }