{{artist.name}}
42 |-
43 |
- {{tag}} 44 |
{{ time }}
32 | ` 33 | ) 34 | -------------------------------------------------------------------------------- /docs/components/todo-list.js: -------------------------------------------------------------------------------- 1 | import { define } from "/synergy.js" 2 | 3 | define( 4 | "todo-list", 5 | () => { 6 | return { 7 | state: { 8 | todos: [], 9 | }, 10 | update: { 11 | addTodo: (state, { event: { key } }) => { 12 | if (key !== "Enter" || !state.newTodo?.length) return state 13 | 14 | return { 15 | ...state, 16 | newTodo: null, 17 | todos: state.todos.concat({ 18 | title: state.newTodo, 19 | completed: false, 20 | }), 21 | } 22 | }, 23 | removeTodo: (state, { scope: { todo } }) => { 24 | return { 25 | ...state, 26 | todos: state.todos.filter(({ title }) => title !== todo.title), 27 | } 28 | }, 29 | }, 30 | getState: (state) => { 31 | const n = state.todos.filter(({ completed }) => !completed).length 32 | 33 | return { 34 | ...state, 35 | itemsLeft: `${n} item${n === 1 ? "" : "s"} left`, 36 | } 37 | }, 38 | } 39 | }, 40 | /* html */ ` 41 | 42 |{{ itemsLeft }}
50 | 51 | ` 52 | ) 53 | -------------------------------------------------------------------------------- /docs/components/x-logo.js: -------------------------------------------------------------------------------- 1 | import { partial } from "../synergy.js" 2 | 3 | partial( 4 | "x-logo", 5 | /* HTML */ ` 6 | 35 | `, 36 | /* CSS */ ` 37 | x-logo { 38 | height: 2rem; 39 | } 40 | 41 | svg { 42 | height: 2rem; 43 | /* margin: 0 0.5rem; */ 44 | margin-right: 0.5rem; 45 | } 46 | 47 | path { 48 | stroke: teal; 49 | fill: teal; 50 | } 51 | 52 | ` 53 | ) 54 | -------------------------------------------------------------------------------- /docs/components/x-pager.js: -------------------------------------------------------------------------------- 1 | import { define } from "../synergy.js" 2 | import { flatNav } from "../data.js" 3 | 4 | define( 5 | "x-pager", 6 | () => { 7 | const items = flatNav 8 | const { pathname } = location 9 | const index = items.findIndex(({ href }) => href === pathname) 10 | 11 | return { 12 | state: { 13 | prev: items[index - 1], 14 | next: items[index + 1], 15 | }, 16 | } 17 | }, 18 | /* html */ ` 19 | 20 | NEXT{{ next.title }} 21 | 24 | 25 | 26 | PREV{{ prev.title }} 27 | 30 | 31 | 32 | `, 33 | /* css */ ` 34 | x-pager { 35 | display: flex; 36 | flex-direction: column; 37 | padding: var(--s3) 0; 38 | } 39 | 40 | x-pager > * { 41 | flex: 1; 42 | } 43 | 44 | a { 45 | padding: var(--s3); 46 | border: 1px solid #eaeaea; 47 | } 48 | 49 | svg { 50 | stroke: currentColor; 51 | stroke-width: 1px; 52 | margin: auto 0; 53 | } 54 | 55 | a { 56 | margin-top: 0; 57 | text-decoration: none; 58 | vertical-align: center; 59 | font-size: var(--s2); 60 | color: #111; 61 | } 62 | 63 | a:hover { 64 | border: 1px solid rgb(102, 204, 51); 65 | color: rgb(102, 204, 51); 66 | } 67 | 68 | a span { 69 | color: #222; 70 | display: block; 71 | font-size: var(--s1); 72 | } 73 | 74 | a:nth-of-type(2) { 75 | text-align: right; 76 | } 77 | 78 | a:nth-of-type(1) { 79 | text-align: left; 80 | } 81 | 82 | a:nth-of-type(2) svg { 83 | float: left; 84 | } 85 | 86 | a:nth-of-type(1) svg { 87 | float: right; 88 | } 89 | 90 | a:nth-of-type(1) { 91 | margin-bottom: var(--s1); 92 | } 93 | 94 | @media screen and (min-width: 1024px) { 95 | x-pager { 96 | flex-direction: row-reverse; 97 | } 98 | 99 | a:nth-of-type(1) { 100 | margin-bottom: 0; 101 | } 102 | 103 | a:nth-of-type(2) { 104 | margin-right: 1rem; 105 | } 106 | } 107 | ` 108 | ) 109 | -------------------------------------------------------------------------------- /docs/data.js: -------------------------------------------------------------------------------- 1 | export const navigation = [ 2 | { 3 | title: "Getting Started", 4 | items: [ 5 | { 6 | title: "Introduction", 7 | href: "/", 8 | }, 9 | ], 10 | }, 11 | { 12 | title: "Learn by Example", 13 | items: [ 14 | { 15 | title: "my-counter", 16 | href: "/my-counter", 17 | }, 18 | { 19 | title: "simple-clock", 20 | href: "/simple-clock", 21 | }, 22 | { 23 | title: "todo-list", 24 | href: "/todo-list", 25 | }, 26 | ], 27 | }, 28 | { 29 | title: "Reference", 30 | items: [ 31 | { 32 | title: "Template syntax", 33 | href: "/template-syntax", 34 | }, 35 | { 36 | title: "Repeated blocks", 37 | href: "/repeated-blocks", 38 | }, 39 | { 40 | title: "Events", 41 | href: "/events", 42 | }, 43 | { 44 | title: "Styles", 45 | href: "/styles", 46 | }, 47 | { 48 | title: "Forms", 49 | href: "/forms", 50 | }, 51 | { 52 | title: "Slots", 53 | href: "/slots", 54 | }, 55 | ], 56 | }, 57 | ] 58 | 59 | function flatten(items) { 60 | return items.reduce((acc, item) => { 61 | if (item.items) { 62 | acc.push(...item.items.map((v) => ({ ...v, category: item.title }))) 63 | } 64 | return acc 65 | }, []) 66 | } 67 | 68 | export const flatNav = flatten(navigation) 69 | -------------------------------------------------------------------------------- /docs/docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 170 | 171 | 172 |Synergy allows you to map events to update functions of the same name.
219 |Model:
220 |const factory = () => ({
221 | update: {
222 | sayHello: (state) => ({
223 | ...state,
224 | greeting: "Hello"
225 | }),
226 | })
227 | Template:
229 |<button :onclick="sayHello">Say hello</button>
230 | Every update function accepts the current state as its first argument, its return value will provide the next state for the custom element.
232 |Because each repeated block creates a new variable scope, it is useful to be able to access those values within your handler. You can do this via the scope property of the second argument to your event handler.
Model:
235 |const factory = () => {
236 | return {
237 | state: {
238 | artists: [
239 | {
240 | name: "pablo picasso",
241 | tags: ["painter", "sculptor", "printmaker", "ceramicist"],
242 | },
243 | {
244 | name: "salvador dali",
245 | tags: ["painter", "sculptor", "photographer", "writer"],
246 | },
247 | ],
248 | },
249 | update: {
250 | select: (state, { scope }) => {
251 | const { artist, tag } = scope
252 |
253 | return {
254 | ...state,
255 | selected: {
256 | artist,
257 | tag,
258 | },
259 | }
260 | },
261 | },
262 | }
263 | }
264 | Template:
266 |<article :each="artist in artists">
267 | <h4>{{ artist.name }}</h4>
268 | <ul>
269 | <li :each="tag in artist.tags" :onclick="select">{{ tag }}</li>
270 | </ul>
271 | </article>
272 | Synergy 219 | combines declarative data and event binding with functional state 220 | management and reactive updates to allow you to build all types of 221 | user interface for the web, no matter how simple or complex.
222 |Here's a simple example:
223 |<my-counter></my-counter>
225 |
226 | <script type="module">
227 | import { define } from "https://unpkg.com/synergy@8.0.0"
228 |
229 | define(
230 | "my-counter",
231 | () => ({
232 | state: { count: 0 },
233 | update: {
234 | increment: ({ count }) => ({
235 | count: count + 1,
236 | }),
237 | }),
238 | `<button :onclick="increment">Count is: {{ count }}</button>`
239 | )
240 | </script>
241 | The above example demonstrates the three core features of Synergy:
243 |If you're new to Synergy then the best place to start is the Learn by Example section. It will introduce you to all of the features of Synergy by showing different examples that will help you to understand and learn quickly.
256 |A key feature of any user interface is the ability to update its state in response to different events. In Synergy, this process is defined by the object returned from your custom elements factory function.
220 |Lets take another look at the my-counter example from the home page:
const factory = () => ({
222 | state: { count: 0 },
223 | update: {
224 | increment: ({ count }) => ({
225 | count: count + 1,
226 | }),
227 | })
228 | In the example above, the returned object includes both the state and update properties.
State is an object that provides the initial data for your custom element. Any properties defined here can be used directly in the template via text or attribute bindings, which is exactly how the value of count is included inside the template using text interpolation:
<button :onclick="increment">Count is: {{ count }}</button>
233 | Update is a dictionary of named state update functions that can be referenced directly in the template as event handlers, as per the :onclick="increment" binding in the example above.
Each state update function takes the current state as its first argument and returns the next state for the custom element.
237 |In this example we're going to create a custom element that displays the current time. We need a way to setup a scheduled event once the element is mounted to the DOM, and we will also need a way to programatically update state whenever that event fires to keep our time value synchronised with the real world.
220 |connectedCallback is a lifecycle event that fires whenever the element is connected to the DOM...
const factory = () => {
222 | return {
223 | update: {
224 | setTime: (state) => {
225 | return {
226 | ...state,
227 | time: new Date().toLocaleTimeString(),
228 | }
229 | },
230 | },
231 | connectedCallback: ({ dispatch }) => {
232 | setInterval(() => {
233 | dispatch({
234 | type: "setTime",
235 | })
236 | }, 100)
237 | },
238 | }
239 | }
240 | <p>Time: {{ time }}</p>
242 | In order to programatically update state we can use the dispatch function provided within the first argument to connectedCallback. The dispatch function accepts a single argument which is an object that must include a type property to identify the update function that we want to call.
Of course, our element can be removed from the DOM at some later point, and we wouldn't want it to carry on scheduling re-renders in the background if there was nobody there to see it. So let's improve our simple-clock element to use the
246 | disconnectedCallback to clear our timer interval.
const factory = () => {
248 | let intervalID
249 |
250 | return {
251 | update: {
252 | setTime: (state, { payload }) => {
253 | return {
254 | ...state,
255 | time: payload,
256 | }
257 | },
258 | },
259 | connectedCallback: ({ dispatch }) => {
260 | intervalID = setInterval(() => {
261 | dispatch({
262 | type: "setTime",
263 | payload: new Date().toLocaleTimeString(),
264 | })
265 | }, 100)
266 | },
267 | disconnectedCallback: () => {
268 | clearInterval(intervalID)
269 | },
270 | }
271 | }
272 | State:
220 |{
221 | classes: ["w32", "h32", "rounded-full", "mx-auto"]
222 | }
223 | Template:
225 |<img :class="classes" />
226 | Output:
228 |<img class="w32 h32 rounded-full mx-auto" />
229 | State:
232 |{
233 | classes: {
234 | 'mx-auto': true,
235 | 'has-error': false
236 | }
237 | }
238 | Template:
240 |<div :class="classes"></div>
241 | Output:
243 |<div class="mx-auto"></div>
244 | State:
247 |{
248 | primary: true,
249 | style: {
250 | display: "inline-block",
251 | borderRadius: "3px",
252 | background: this.primary ? "white" : "transparent",
253 | color: this.primary ? "black" : "white",
254 | border: "2px solid white",
255 | }
256 | }
257 | Template:
259 |<button :primary :style></button>
260 | Output:
262 |<button
263 | primary
264 | style="
265 | display: inline-block;
266 | border-radius: 3px;
267 | background: white;
268 | color: black;
269 | border: 2px solid white;"
270 | ></button>
271 | {{ title }}
" 33 | define( 34 | name, 35 | () => ({ 36 | state: { 37 | title: "ok!", 38 | }, 39 | }), 40 | template 41 | ) 42 | mount(` 43 | <${name}> 44 | `) 45 | 46 | assert.equal($("p").textContent, "ok!") 47 | }) 48 | 49 | it("reflects observed attribute changes on to viewmodel", async () => { 50 | let name = createName() 51 | define( 52 | name, 53 | () => ({ observe: ["title"], state: { title: "" } }), 54 | "{{ title }}
" 55 | ) 56 | mount(` 57 | <${name} title="ok!"> 58 | `) 59 | $(name).setAttribute("title", "foo!") 60 | await nextFrame() 61 | assert.equal($(`${name} p`).textContent, "foo!") 62 | }) 63 | 64 | it("reflects viewmodel changes back on to attributes", async () => { 65 | let name = createName() 66 | 67 | define( 68 | name, 69 | () => ({ 70 | state: { 71 | show: true, 72 | }, 73 | update: { 74 | toggle: (state) => ({ 75 | ...state, 76 | show: !state.show, 77 | }), 78 | }, 79 | }), 80 | 'hello world!
' 81 | ) 82 | mount(` 83 | <${name}> 84 | `) 85 | let el = $("p") 86 | assert.ok(el.hasAttribute("hidden") === false) 87 | $(`${name} button`).click() 88 | await nextFrame() 89 | assert.ok(el.hasAttribute("hidden")) 90 | }) 91 | 92 | it("merges default slot", () => { 93 | let name = createName() 94 | define( 95 | name, 96 | () => ({}), 97 | html`hello
113 |
{{ item }}
248 | ` 249 | ) 250 | 251 | let name = createName() 252 | 253 | const letters = "synergy".split("") 254 | 255 | const framework = { 256 | repo: "defx/synergy", 257 | } 258 | 259 | define( 260 | name, 261 | () => ({ 262 | state: { 263 | letters, 264 | framework, 265 | }, 266 | }), 267 | html` 268 |{{ foo }}
` 299 | ) 300 | 301 | mount(`<${name}>`) 302 | 303 | $(`p`).click() 304 | 305 | await nextFrame() 306 | 307 | assert.equal($(name).foo, "baz") 308 | }) 309 | 310 | it("supports async initialisation", async () => { 311 | // @todo: improve this 312 | let name = createName() 313 | 314 | define( 315 | name, 316 | () => 317 | Promise.resolve({ 318 | state: { 319 | foo: "bar", 320 | }, 321 | }), 322 | html`{{ foo }}
` 323 | ) 324 | 325 | mount(`<${name}>`) 326 | 327 | assert.ok($(name)) 328 | assert.equal($(name).textContent.trim(), "") 329 | 330 | await nextFrame() 331 | assert.equal($(name).innerText.trim(), "bar") 332 | }) 333 | }) 334 | -------------------------------------------------------------------------------- /test/helpers.js: -------------------------------------------------------------------------------- 1 | import { applyAttribute } from "../src/helpers.js" 2 | 3 | describe("applyAttribute", () => { 4 | it("sets boolean true as empty string", () => { 5 | let node = document.createElement("div") 6 | 7 | applyAttribute(node, "foo", true) 8 | 9 | assert.equal(node.getAttribute("foo"), "") 10 | }) 11 | it("removes attribute when boolean false", () => { 12 | let node = document.createElement("div") 13 | 14 | applyAttribute(node, "foo", false) 15 | 16 | assert.equal(node.getAttribute("foo"), null) 17 | }) 18 | it("sets aria- prefixed attributes with boolean false to string", () => { 19 | let node = document.createElement("div") 20 | 21 | applyAttribute(node, "ariaFoo", false) 22 | 23 | assert.equal(node.getAttribute("aria-foo"), "false") 24 | }) 25 | it("sets aria- prefixed attributes with boolean true to string", () => { 26 | let node = document.createElement("div") 27 | 28 | applyAttribute(node, "ariaFoo", true) 29 | 30 | assert.equal(node.getAttribute("aria-foo"), "true") 31 | }) 32 | it("sets non-aria attribute with falsy value to string", () => { 33 | let node = document.createElement("div") 34 | 35 | applyAttribute(node, "dataIndex", 0) 36 | 37 | assert.equal(node.getAttribute("data-index"), "0") 38 | }) 39 | }) 40 | -------------------------------------------------------------------------------- /test/hydrate.js: -------------------------------------------------------------------------------- 1 | import { define } from "../src/index.js" 2 | 3 | describe("hydrate", () => { 4 | it("rehydrates event listeners", async () => { 5 | let name = createName() 6 | let stack = [] 7 | 8 | define( 9 | name, 10 | () => ({ 11 | update: { 12 | foo: () => stack.push("foo!"), 13 | }, 14 | }), 15 | html` 16 | 19 | ` 20 | ) 21 | 22 | mount(html`<${name}>click me!`) 23 | 24 | let node = $(name) 25 | let outerHTML = node.outerHTML 26 | 27 | node.remove() 28 | 29 | mount(outerHTML) 30 | 31 | assert.deepEqual(stack, []) 32 | 33 | $("#foo").click() 34 | 35 | assert.deepEqual(stack, ["foo!"]) 36 | }) 37 | it("rehydrates repeated blocks", async () => { 38 | let name = createName() 39 | let stack = [] 40 | 41 | define( 42 | name, 43 | () => { 44 | return { 45 | observe: ["todos"], 46 | state: { 47 | todos: [ 48 | { 49 | title: "feed the duck", 50 | }, 51 | { 52 | title: "walk the cat", 53 | }, 54 | ], 55 | }, 56 | update: { 57 | click: (state, action) => { 58 | stack.push(action.scope.todo.title) 59 | return state 60 | }, 61 | }, 62 | } 63 | }, 64 | ` 65 |{{c1}} + {{c2}}
` 51 | ) 52 | 53 | mount(html`<${name}>`) 54 | 55 | assert.equal($("p").textContent, "red + green") 56 | }) 57 | 58 | it("should apply all the values", () => { 59 | let name = createName() 60 | 61 | define( 62 | name, 63 | () => ({ 64 | state: { 65 | classes: ["one", "two", "three"], 66 | }, 67 | }), 68 | html`` 69 | ) 70 | 71 | mount(html`<${name}>`) 72 | 73 | assert.equal($("section").className, "one two three") 74 | }) 75 | 76 | it("should apply all the keys with truthy values", () => { 77 | let name = createName() 78 | 79 | define( 80 | name, 81 | () => ({ 82 | state: { 83 | classes: { 84 | one: true, 85 | two: false, 86 | three: {}, 87 | four: null, 88 | five: "", 89 | six: "ok", 90 | }, 91 | }, 92 | }), 93 | html` ` 94 | ) 95 | 96 | mount(html`<${name}>`) 97 | 98 | assert.equal($("section").className, "one three six") 99 | }) 100 | 101 | it("should apply styles", () => { 102 | let name = createName() 103 | 104 | define( 105 | name, 106 | () => ({ 107 | state: { 108 | foo: ` 109 | background-color: gold; 110 | color: tomato; 111 | width: 100px; 112 | height: 100px; 113 | `, 114 | }, 115 | }), 116 | html` ` 117 | ) 118 | 119 | mount(html`<${name}>`) 120 | 121 | assert.equal( 122 | $("section").getAttribute("style"), 123 | "background-color: gold; color: tomato; width: 100px; height: 100px;" 124 | ) 125 | }) 126 | 127 | it("should preserve browser styles", async () => { 128 | let name = createName() 129 | 130 | define( 131 | name, 132 | () => ({ 133 | observe: ["foo"], 134 | state: { 135 | foo: ` 136 | background-color: gold; 137 | color: tomato; 138 | width: 100px; 139 | height: 100px; 140 | `, 141 | }, 142 | }), 143 | html` ` 144 | ) 145 | 146 | mount(html`<${name}>`) 147 | 148 | $("section").style.opacity = "0.5" 149 | 150 | assert.ok( 151 | $("section").getAttribute("style").includes("background-color: gold;") 152 | ) 153 | 154 | $(name).foo = ` 155 | background-color: tomato; 156 | color: gold; 157 | width: 100px; 158 | height: 100px; 159 | ` 160 | 161 | await nextFrame() 162 | 163 | assert.ok( 164 | $("section").getAttribute("style").includes("background-color: tomato;") 165 | ) 166 | 167 | assert.ok($("section").getAttribute("style").includes("opacity: 0.5;")) 168 | }) 169 | 170 | it("should apply styles (Object / kebab)", () => { 171 | let name = createName() 172 | 173 | define( 174 | name, 175 | () => ({ 176 | state: { 177 | foo: { 178 | "background-color": "gold", 179 | color: "tomato", 180 | width: "100px", 181 | height: "100px", 182 | }, 183 | }, 184 | }), 185 | html` ` 186 | ) 187 | 188 | mount(html`<${name}>`) 189 | 190 | assert.equal( 191 | $("section").getAttribute("style"), 192 | "background-color: gold; color: tomato; width: 100px; height: 100px;" 193 | ) 194 | }) 195 | 196 | it("should apply styles (Object / pascal)", () => { 197 | let name = createName() 198 | 199 | define( 200 | name, 201 | () => ({ 202 | state: { 203 | foo: { 204 | backgroundColor: "gold", 205 | color: "tomato", 206 | width: "100px", 207 | height: "100px", 208 | }, 209 | }, 210 | }), 211 | html` ` 212 | ) 213 | 214 | mount(html`<${name}>`) 215 | 216 | assert.equal( 217 | $("section").getAttribute("style"), 218 | "background-color: gold; color: tomato; width: 100px; height: 100px;" 219 | ) 220 | }) 221 | 222 | it("should allow whitespace formatting", () => { 223 | let name = createName() 224 | 225 | define( 226 | name, 227 | () => ({ 228 | state: { 229 | c1: "red", 230 | c2: "green", 231 | }, 232 | }), 233 | html`{{ c2 }}
` 234 | ) 235 | 236 | mount(html`<${name}>`) 237 | 238 | assert.equal($("p").getAttribute("name"), "red") 239 | assert.equal($("p").textContent, "green") 240 | }) 241 | 242 | it("should support negation", async () => { 243 | let name = createName() 244 | 245 | define( 246 | name, 247 | () => ({ 248 | observe: ["foo"], 249 | state: { foo: true }, 250 | }), 251 | html`boo!
` 252 | ) 253 | 254 | mount(html`<${name} foo>`) 255 | 256 | assert.notOk($("p").hidden) // [hidden] 257 | 258 | $(name).foo = false 259 | 260 | await nextFrame() 261 | 262 | assert.ok($("p").hidden) 263 | }) 264 | 265 | it("should support square brackets", () => { 266 | let name = createName() 267 | 268 | define( 269 | name, 270 | () => ({ 271 | state: { 272 | columns: ["one", "two", "three"], 273 | rows: [ 274 | { 275 | one: 1, 276 | two: 2, 277 | three: 3, 278 | }, 279 | { 280 | one: 3, 281 | two: 2, 282 | three: 1, 283 | }, 284 | { 285 | one: 1, 286 | two: 3, 287 | three: 2, 288 | }, 289 | ], 290 | }, 291 | }), 292 | html` 293 || {{ column }} | 296 |
|---|
| {{ row[col] }} | 299 |
{{ two }}
/{{ three }}` 451 | ) 452 | 453 | mount(/* html */ `{{ foo }}
`) 8 | 9 | let name = createName() 10 | 11 | define( 12 | name, 13 | () => ({ 14 | observe: ["foo"], 15 | state: { 16 | foo: "bar", 17 | }, 18 | }), 19 | html`{{todo.title}}
39 |{{message}}
40 |{{ time }}
43 | ` 44 | ) 45 | 46 | define( 47 | "x-app", 48 | () => ({}), 49 | /* html */ ` 50 |{{ time }}
32 | ` 33 | ) 34 | -------------------------------------------------------------------------------- /website/components/todo-list.js: -------------------------------------------------------------------------------- 1 | import { define } from "/synergy.js" 2 | 3 | define( 4 | "todo-list", 5 | () => { 6 | return { 7 | state: { 8 | todos: [], 9 | }, 10 | update: { 11 | addTodo: (state, { event: { key } }) => { 12 | if (key !== "Enter" || !state.newTodo?.length) return state 13 | 14 | return { 15 | ...state, 16 | newTodo: null, 17 | todos: state.todos.concat({ 18 | title: state.newTodo, 19 | completed: false, 20 | }), 21 | } 22 | }, 23 | removeTodo: (state, { scope: { todo } }) => { 24 | return { 25 | ...state, 26 | todos: state.todos.filter(({ title }) => title !== todo.title), 27 | } 28 | }, 29 | }, 30 | getState: (state) => { 31 | const n = state.todos.filter(({ completed }) => !completed).length 32 | 33 | return { 34 | ...state, 35 | itemsLeft: `${n} item${n === 1 ? "" : "s"} left`, 36 | } 37 | }, 38 | } 39 | }, 40 | /* html */ ` 41 | 42 |{{ itemsLeft }}
50 | 51 | ` 52 | ) 53 | -------------------------------------------------------------------------------- /website/components/x-logo.js: -------------------------------------------------------------------------------- 1 | import { partial } from "../synergy.js" 2 | 3 | partial( 4 | "x-logo", 5 | /* HTML */ ` 6 | 35 | `, 36 | /* CSS */ ` 37 | x-logo { 38 | height: 2rem; 39 | } 40 | 41 | svg { 42 | height: 2rem; 43 | /* margin: 0 0.5rem; */ 44 | margin-right: 0.5rem; 45 | } 46 | 47 | path { 48 | stroke: teal; 49 | fill: teal; 50 | } 51 | 52 | ` 53 | ) 54 | -------------------------------------------------------------------------------- /website/components/x-pager.js: -------------------------------------------------------------------------------- 1 | import { define } from "../synergy.js" 2 | import { flatNav } from "../data.js" 3 | 4 | define( 5 | "x-pager", 6 | () => { 7 | const items = flatNav 8 | const { pathname } = location 9 | const index = items.findIndex(({ href }) => href === pathname) 10 | 11 | return { 12 | state: { 13 | prev: items[index - 1], 14 | next: items[index + 1], 15 | }, 16 | } 17 | }, 18 | /* html */ ` 19 | 20 | NEXT{{ next.title }} 21 | 24 | 25 | 26 | PREV{{ prev.title }} 27 | 30 | 31 | 32 | `, 33 | /* css */ ` 34 | x-pager { 35 | display: flex; 36 | flex-direction: column; 37 | padding: var(--s3) 0; 38 | } 39 | 40 | x-pager > * { 41 | flex: 1; 42 | } 43 | 44 | a { 45 | padding: var(--s3); 46 | border: 1px solid #eaeaea; 47 | } 48 | 49 | svg { 50 | stroke: currentColor; 51 | stroke-width: 1px; 52 | margin: auto 0; 53 | } 54 | 55 | a { 56 | margin-top: 0; 57 | text-decoration: none; 58 | vertical-align: center; 59 | font-size: var(--s2); 60 | color: #111; 61 | } 62 | 63 | a:hover { 64 | border: 1px solid rgb(102, 204, 51); 65 | color: rgb(102, 204, 51); 66 | } 67 | 68 | a span { 69 | color: #222; 70 | display: block; 71 | font-size: var(--s1); 72 | } 73 | 74 | a:nth-of-type(2) { 75 | text-align: right; 76 | } 77 | 78 | a:nth-of-type(1) { 79 | text-align: left; 80 | } 81 | 82 | a:nth-of-type(2) svg { 83 | float: left; 84 | } 85 | 86 | a:nth-of-type(1) svg { 87 | float: right; 88 | } 89 | 90 | a:nth-of-type(1) { 91 | margin-bottom: var(--s1); 92 | } 93 | 94 | @media screen and (min-width: 1024px) { 95 | x-pager { 96 | flex-direction: row-reverse; 97 | } 98 | 99 | a:nth-of-type(1) { 100 | margin-bottom: 0; 101 | } 102 | 103 | a:nth-of-type(2) { 104 | margin-right: 1rem; 105 | } 106 | } 107 | ` 108 | ) 109 | -------------------------------------------------------------------------------- /website/customElements.js: -------------------------------------------------------------------------------- 1 | const ANON = /<([a-z]\w*-\w*)/gm 2 | 3 | function unique(arr) { 4 | return [...new Set(arr)] 5 | } 6 | 7 | export function listCustomElements(html = "") { 8 | const names = (html.match(ANON) || []).map((v) => v.slice(1)) 9 | return unique(names) 10 | } 11 | -------------------------------------------------------------------------------- /website/data/nav.js: -------------------------------------------------------------------------------- 1 | export const navigation = [ 2 | { 3 | title: "Examples", 4 | items: [ 5 | { 6 | title: "my-counter", 7 | href: "my-counter", 8 | }, 9 | { 10 | title: "simple-clock", 11 | href: "simple-clock", 12 | }, 13 | { 14 | title: "todo-list", 15 | href: "todo-list", 16 | }, 17 | ], 18 | }, 19 | { 20 | title: "Reference", 21 | items: [ 22 | { 23 | title: "Template syntax", 24 | href: "template-syntax", 25 | }, 26 | { 27 | title: "Repeated blocks", 28 | href: "repeated-blocks", 29 | }, 30 | { 31 | title: "Events", 32 | href: "events", 33 | }, 34 | { 35 | title: "Styles", 36 | href: "styles", 37 | }, 38 | { 39 | title: "Forms", 40 | href: "forms", 41 | }, 42 | ], 43 | }, 44 | ] 45 | 46 | function flatten(items) { 47 | return items.reduce((acc, item) => { 48 | if (item.items) { 49 | acc.push(...item.items.map((v) => ({ ...v, category: item.title }))) 50 | } 51 | return acc 52 | }, []) 53 | } 54 | 55 | export const flatNav = flatten(navigation) 56 | -------------------------------------------------------------------------------- /website/head.js: -------------------------------------------------------------------------------- 1 | const HEAD_OPEN = "" 2 | const HEAD_CLOSE = "" 3 | 4 | export const decapitate = (str) => { 5 | const start = str.indexOf(HEAD_OPEN) 6 | const end = str.indexOf(HEAD_CLOSE) 7 | if (start === -1) 8 | return { 9 | head: "", 10 | body: str, 11 | } 12 | return { 13 | head: str.slice(start + HEAD_OPEN.length, end).trim(), 14 | body: 15 | str.slice(0, start).trim() + str.slice(end + HEAD_CLOSE.length).trim(), 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "synergydocs", 3 | "type": "module", 4 | "version": "1.0.0", 5 | "description": "", 6 | "scripts": { 7 | "linklib": "cp ../dist/synergy.js public/", 8 | "start": "nodemon --ignore 'build/*' server.js", 9 | "build": "rm -r build ; mkdir build && cd build && wget -r -k -nH --html-extension http://localhost:3000", 10 | "postbuild": "cp -a public/. build && cp -r components build && echo 'synergyjs.org' > build/CNAME && rm -r ../docs && mv build ../docs", 11 | "serve": "cd build && npx serve -p 8000" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "express": "^4.18.2", 18 | "fs-extra": "^10.1.0", 19 | "globby": "^13.1.2", 20 | "highlight.js": "^11.7.0", 21 | "markdown-it": "^13.0.1", 22 | "nodemon": "^2.0.20", 23 | "puppeteer-core": "^15.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /website/pages/api.md: -------------------------------------------------------------------------------- 1 | 2 |