Dylan Piercey DylanPiercey
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import http from "node:http"; | |
| import timers from "node:timers/promises"; | |
| const css = { | |
| "/section1.css": | |
| "body { background: #111; color: #0f0; } .box { border: 2px solid #0f0; } section:nth-of-type(1) .box::before { content: 'Section 1: ' }", | |
| "/section2.css": | |
| "body { color: #0ff; } .box { border-color: #0ff; } section:nth-of-type(2) .box::before { content: 'Section 2: ' }", | |
| "/section3.css": | |
| "body { color: #f0f; } .box { border-color: #f0f; } section:nth-of-type(3) .box::before { content: 'Section 3: ' }", |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const valuesById = new Map(); | |
| const listenersById = new Map(); | |
| export function withGlobalState(component, out, id, state = {}) { | |
| if (typeof document === "undefined") { | |
| if (Array.isArray(id)) { | |
| for (const item of id) { | |
| withGlobalState(component, out, item, state); | |
| } | |
| } else { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (() => { | |
| let activeMode = "default"; | |
| const modes = { | |
| default: (_) => _, | |
| camel: (_, c) => c.toUpperCase(), | |
| snake: (_, c) => `_${c}`, | |
| kebab: (_, c) => `-${c}`, | |
| smoosh: (_, c) => c.toLowerCase(), | |
| }; | |
| const root = document.createElement("div"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <local/count=0 storageKey="count"/> | |
| <p>You clicked ${count} times</p> | |
| <button onClick() { count++ }> | |
| Click me | |
| </button> |
DylanPiercey
/ child.marko
Last active
July 28, 2021 19:09
— forked from mpeg/child.marko
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div/getEl> | |
| <h1>Test</h1> | |
| </div> | |
| <return={ | |
| get div_width() { | |
| return getEl().clientWidth | |
| } | |
| } /> |
DylanPiercey
/ index.marko
Created
July 28, 2021 15:23
A counter component example using the Marko "Tags API"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <let/count = 0/> | |
| <p>You clicked ${count} times</p> | |
| <button onClick() { count++ }> | |
| Click me | |
| </button> |
DylanPiercey
/ simple-binding.marko
Created
July 28, 2021 04:05
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <let/x="Hello"/> | |
| <input value:=x/> | |
| <div>${x}</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getWritableDOM = (() => { | |
| const testDoc = document.implementation.createHTMLDocument(); | |
| testDoc.write("<script>"); | |
| // Safari and potentially other browsers strip script tags from detached documents. | |
| // If that's the case we'll fallback to an iframe implementation. | |
| if (testDoc.scripts.length) { | |
| return target => | |
| toWritable(target, document.implementation.createHTMLDocument()); | |
| } else { |
DylanPiercey
/ index.marko
Created
February 10, 2021 15:57
Tween Tag implementation for Marko 6 / FLUURT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <let/distance=0/> | |
| <let/startTime=0/> | |
| <let/curValue=input.default/> | |
| <const/ease=input.ease || (v) => v < 0.5 ? 2 * v * v : -1 + (4 - 2 * v) * v/> | |
| <yield=curValue onnext=(nextValue) => { | |
| startTime = performance.now(); | |
| distance = curValue - nextValue; | |
| }/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| static function createBuilder(template) { | |
| const parts = template.replace(/\\n/, "\n").replace(/</g, "<").split(" "); | |
| const partEntries = Object.entries(parts.reduce((map, str, i) => { | |
| ["TAG", "VAR", "PARAMS", "ATTRS"].forEach(name => { | |
| if (str.indexOf(name) >= 0) { | |
| map[name] = i; | |
| } | |
| }); | |
| return map; | |
| }, {})); |
NewerOlder