├── .github
    └── logo.png
├── .gitignore
├── LICENSE
├── README.md
├── ROADMAP.md
├── dist.sh
├── docs
    ├── README.md
    ├── api.md
    ├── getting_started.md
    ├── installation.md
    └── reactivity
    │   ├── README.md
    │   ├── computed.md
    │   ├── conditionals.md
    │   ├── directives.md
    │   ├── mark.md
    │   └── reactive_values.md
├── example
    └── 01
    │   ├── README.md
    │   └── index.html
├── index.ts
├── package.json
├── postpub.sh
├── pubwebsite.sh
├── setup.sh
├── tests
    ├── index.html
    ├── templates.html
    ├── test.computed.html
    ├── test.conditionals.html
    ├── test.css
    ├── test.directives.html
    ├── test.html
    ├── test.js
    ├── test.loops.html
    └── test.templates.html
├── tsconfig.json
├── website
    ├── assets
    │   ├── banner.png
    │   ├── fonts
    │   │   ├── press-start-2p-latin-ext.woff2
    │   │   ├── press-start-2p-latin.woff2
    │   │   ├── vt323-latin-ext.woff2
    │   │   └── vt323-latin.woff2
    │   ├── grid.svg
    │   ├── heart.png
    │   ├── index.css
    │   ├── noise.png
    │   └── sb.png
    ├── index.html
    ├── index.js
    └── inventory.html
└── yarn.lock


/.github/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/.github/logo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /index.js
 3 | /index.html
 4 | /perf.html
 5 | /temp
 6 | **/temp.*
 7 | notes.md
 8 | /dist
 9 | 
10 | **/*.min.js
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023-present, Alan Tom
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > [!IMPORTANT]
  2 | >
  3 | > After nearly 2 years of no commits. I've decided to archive Strawberry.
  4 | > Should you be curious enough to wonder why, here's a post on [why it started, why it stopped, any why the decision was made](https://18alan.space/posts/archiving-strawberry.html).
  5 | 
  6 | <div align="center" markdown="1">
  7 | 
  8 | <img src="https://github.com/18alantom/strawberry/assets/29507195/9cb6a348-3b02-4de7-be62-ee85cf594871" alt="strawberry logo" width="720"/>
  9 | 
 10 | Zero-dependency, build-free framework for the artisanal web.
 11 | 
 12 | [Website](https://18alan.space/strawberry/) · [How it works](https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html) · [Docs](https://github.com/18alantom/strawberry/tree/main/docs)
 13 | 
 14 | </div>
 15 | 
 16 | > **Warning**
 17 | >
 18 | > Strawberry is in an experimental phase. Everything stated below works, but I
 19 | > am still figuring out the quickest and cleanest ways of doing things.
 20 | 
 21 | ---
 22 | 
 23 | > Seriously, another frontend framework?
 24 | 
 25 | Yes, but, Strawberry is not like the usual frontend-framework.
 26 | 
 27 | It doesn't have any dependencies. It doesn't need a build-step to run. It's
 28 | tiny, less than 3KB when gzipped. Yet it does a lot of the core things the big,
 29 | spangly frameworks can do.
 30 | 
 31 | ```html
 32 | <!-- Define Components -->
 33 | <template name="plum-p">
 34 |   <p style="color: plum"><slot /></p>
 35 | </template>
 36 | 
 37 | <!-- Initialize Strawberry -->
 38 | <script>
 39 |   const data = sb.init();
 40 | </script>
 41 | 
 42 | <!-- Use Components -->
 43 | <plum-p sb-mark="message"> A plum colored p element! </plum-p>
 44 | 
 45 | <!-- Dynamically Update Components -->
 46 | <script>
 47 |   data.message = 'Hello, World!';
 48 | </script>
 49 | ```
 50 | 
 51 | [Here's](https://18alan.space/strawberry/#inventory-example) a live example from
 52 | the website.
 53 | 
 54 | ---
 55 | 
 56 | <div align="center" markdown="1">
 57 | 
 58 | **Index**
 59 | 
 60 | [Installation](#installation) · [Features](#features) · [Examples](#examples) · [Development](#development)
 61 | 
 62 | [Docs](https://github.com/18alantom/strawberry/tree/main/docs) · [Roadmap](https://github.com/18alantom/strawberry/blob/main/ROADMAP.md)
 63 | 
 64 | </div>
 65 | 
 66 | **Documentation Index**
 67 | 
 68 | 1. [Installation](./docs/installation.md): explains how to pull Strawberry code into your web project.
 69 | 2. [Getting Started](./docs/getting_started.md): describes a simple example with code walk through.
 70 | 3. [Reactivity](./docs/reactivity/README.md): explains what is reactivity in Strawberry.
 71 |    1. [Reactive Values](./docs/reactivity/reactive_values.md): explains keys and values of the reactive object.
 72 |    2. [Mark (`sb-mark`)](./docs/reactivity/mark.md): explains how to mark an element to update along with data.
 73 |    3. [Conditionals (`sb-if`, `sb-ifnot`)](./docs/reactivity/conditionals.md): explains how to render or hide an element when data changes to truthy or falsy.
 74 |    4. [Computed](./docs/reactivity/computed.md): explains how to define reactive values that depend on other reactive values.
 75 |    5. [Directives](./docs/reactivity/directives.md): explains how to extend Strawberry with custom directives.
 76 | 4. Composability (to be added)
 77 | 5. [API](./docs/api.md): lists all of Strawberry's defined directives and methods.
 78 | 
 79 | ## Installation
 80 | 
 81 | If you wanna try it out, then run this 👇 command to setup a simple _starter_ page.
 82 | 
 83 | ```bash
 84 | curl -so- https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh | bash
 85 | ```
 86 | 
 87 | Or if you wanna just use it straight away, copy this 👇 script tag in the head of your html file:
 88 | 
 89 | ```html
 90 | <script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>
 91 | ```
 92 | 
 93 | ## Features
 94 | 
 95 | Here're are a few of its features:
 96 | 
 97 | 1. **Reactivity**: change your data and the UI updates.
 98 | 2. **Composability**: create and use components.
 99 | 3. **Build-free**: doesn't require a build-step. Link or [copy the lib](https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js) and you're ready to go.
100 | 4. **Zero Dependencies**: has no dependencies. Uses WebAPIs for everything.
101 | 5. **Tiny**: [source code](https://github.com/18alantom/strawberry/blob/main/index.ts) is under 1000 CLOC.
102 | 6. **No VDOM**: directly updates the DOM.
103 | 
104 | Strawberry is and will be developed with these two hard constraints:
105 | 
106 | 1. Zero dependencies.
107 | 2. No build step required to run it.
108 | 
109 | Other than this, there is also a soft constraint of keeping the source code light.
110 | 
111 | ---
112 | 
113 | ## Examples
114 | 
115 | Here are a couple of simple examples of a few things that Strawberry can do
116 | right now.
117 | 
118 | **1. Basic Reactivity**: `innerText` is updated when `data.message` when
119 | is set.
120 | 
121 | ```html
122 | <p sb-mark="message">Placeholder</p>
123 | 
124 | <script>
125 |   data.message = 'Hello, Strawberry!';
126 | </script>
127 | ```
128 | 
129 | **2. Computed Values**: `innerText` is updated with the computed value
130 | `data.countMessage` when `data.count` is updated.
131 | 
132 | ```html
133 | <p sb-mark="countMessage">Placeholder</p>
134 | 
135 | <script>
136 |   data.count = 0;
137 |   data.countMessage = () => `The count is: ${data.count}`;
138 | 
139 |   data.count += 1;
140 | </script>
141 | ```
142 | 
143 | **3. Conditional Rendering**: `p` is rendered only when `data.sayHi` is `true`.
144 | 
145 | ```html
146 | <template sb-if="sayHi">
147 |   <p>Hi!</p>
148 | </template>
149 | 
150 | <script>
151 |   data.sayHi = true;
152 | </script>
153 | ```
154 | 
155 | **4. Looping**: `ul` is populated with `li` when `data.list` is set. `innerText`
156 | of the `li` are set from the list items.
157 | 
158 | ```html
159 | <ul>
160 |   <li sb-mark="list.#"></li>
161 | </ul>
162 | 
163 | <script>
164 |   data.list = ['Strawberry', 'Mulberry', 'Raspberry'];
165 | </script>
166 | ```
167 | 
168 | **5. Templates**: On running `sb.register`, the `red-p` element is defined and can be used.
169 | 
170 | ```html
171 | <template name="red-p">
172 |   <p style="color: red"><slot /></p>
173 | </template>
174 | 
175 | <red-p>Hi!</red-p>
176 | ```
177 | 
178 | **5. External Templates**: Templates can be defined in external files. They are loaded and registered using `sb.load`.
179 | 
180 | ```html
181 | <script>
182 |   sb.load('./templates.html');
183 | </script>
184 | 
185 | <red-p>Hi!</red-p>
186 | ```
187 | 
188 | **6. Nested Templates**: Templates can be nested, named slots can be used to
189 | 
190 | ```html
191 | <!-- Blue H1 Template -->
192 | <template name="blue-h1">
193 |   <h1 style="color: blue"><slot></slot></h1>
194 | </template>
195 | 
196 | <!-- Red P Template -->
197 | <template name="red-p">
198 |   <p style="color: red"><slot></slot></p>
199 | </template>
200 | 
201 | <!-- Div Template using the above two -->
202 | <template name="user-div">
203 |   <div>
204 |     <blue-h1>
205 |       <slot name="name" />
206 |     </blue-h1>
207 |     <red-p>
208 |       <slot name="age" />
209 |     </red-p>
210 |   </div>
211 | </template>
212 | 
213 | <body>
214 |   <user-div>
215 |     <span slot="name" sb-mark="user.name"></span>
216 |     <span slot="age" sb-mark="user.age"></span>
217 |   </user-div>
218 | </body>
219 | 
220 | <script>
221 |   data.user = { name: 'Lin', age: 36 };
222 | </script>
223 | ```
224 | 
225 | ---
226 | 
227 | ## Development
228 | 
229 | The development of Strawberry does has a direction, but no deadlines as I work
230 | on this usually during the weekends.
231 | 
232 | Here's a
233 | [road map](https://github.com/18alantom/strawberry/blob/main/ROADMAP.md). This
234 | isn't exactly a road map, but a list of problems and maybe their solutions that
235 | need to be implemented to further Strawberry.
236 | 
237 | ### Running Dev Mode
238 | 
239 | Strawberry has only two dev dependencies: `esbuild` and `typescript`.
240 | 
241 | To run Strawberry in dev mode:
242 | 
243 | ```bash
244 | # Clone the repo
245 | git clone https://github.com/18alantom/strawberry
246 | 
247 | # Install esbuild and typescript
248 | cd strawberry
249 | yarn install
250 | 
251 | # Run in Dev mode
252 | yarn dev
253 | ```
254 | 
255 | You can now create an HTML file in the repository and add `script:src` to link
256 | the generated `index.js` file. You can serve this using the Live Preview plugin.
257 | 
258 | To view the rendered HTML you need to serve it locally for that you can use the [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) VSCode plugin, or run [this](https://docs.python.org/3/library/http.server.html#:~:text=python%20%2Dm%20http.server%20%2D%2Dbind%20127.0.0.1):
259 | 
260 | ```bash
261 | # Cd into strawberry root
262 | cd strawberry
263 | 
264 | # Run simple python server to serve files in strawberry
265 | python -m http.server 8080 --bind 127.0.0.1
266 | ```
267 | 
268 | ### Tests
269 | 
270 | Right now tests just involve linking strawberry to an html file (`test.*.html`),
271 | and calling the `test` function to check whether a value is as expected. Success
272 | and Failures are printed in the console.
273 | 
274 | See [`test.html`](https://github.com/18alantom/strawberry/blob/main/tests/test.html) for an example.
275 | 
276 | To see all tests in one place, open `test/index.html`.
277 | 
278 | ### Website
279 | 
280 | The website has two dependencies required to run, `sb.min.js` and
281 | `highlight.min.js` for running strawberry in the example and highlighting all the code.
282 | 
283 | You can run the [`pubwebsite.sh`](https://github.com/18alantom/strawberry/blob/main/pubwebsite.sh) script which downloads these files:
284 | 
285 | ```bash
286 | ./pubwebsite.sh
287 | ```
288 | 
289 | And then respond with `"n"` when it asks to publish:
290 | 
291 | ```bash
292 | $ Publish the website? [y/n]: n
293 | $ /Users/you/Desktop/projects/strawberry
294 | ```
295 | 
296 | After the script has run, [`website/index.html`](https://github.com/18alantom/strawberry/blob/main/website/index.html) should render as expected.
297 | 
298 | ---
299 | 
300 | ## Douglas Crockford on the XML of today
301 | 
302 | These are excerpts from the CoRecursive podcast on [JSON vs XML](https://corecursive.com/json-vs-xml-douglas-crockford/).
303 | 
304 | > It’s probably the JavaScript frameworks. They have gotten so big and so weird.
305 | > People seem to love them. I don’t understand why.
306 | 
307 | And on web APIs.
308 | 
309 | > ...the browsers have actually gotten pretty good. The web standards thing have
310 | > finally worked, and the web API is stable pretty much. Some of it’s still pretty
311 | > stupid, but it works and it’s reliable.
312 | 
313 | Read the transcript on [CoRecursive](https://corecursive.com/json-vs-xml-douglas-crockford/#javascript-frameworks).
314 | 


--------------------------------------------------------------------------------
/ROADMAP.md:
--------------------------------------------------------------------------------
  1 | This project doesn't have a concrete road map. It's in the experimental stage
  2 | right now. This `md` is just a list of problems whose solutions haven't been
  3 | implemented or even figured out.
  4 | 
  5 | For a few of these, I haven't decided whether they are problems Strawberry
  6 | should be solving. In keeping with the theme of simplicity, there are ways
  7 | around the problems, but they might feel convoluted.
  8 | 
  9 | Ultimately this framework should feel intuitive and simple even if it is at the
 10 | cost of not being able to do _everything_.
 11 | 
 12 | **Terminology**:
 13 | 
 14 | - Reactive Data Object (RDO): the object received when `sb.init` is called, when
 15 |   props of this object are updated, the UI updates.
 16 | 
 17 | **List**
 18 | 
 19 | - [ ] [Setting `sb-*` props for Strawberry inserted elements](#setting-sb--props-for-strawberry-inserted-elements)
 20 | - [ ] [Directives for Strawberry Created Elements](#directives-for-strawberry-created-elements)
 21 | - [ ] [Logic Encapsulation in Templates](#logic-encapsulation-in-templates)
 22 | - [ ] [Interactive Elements in Templates](#interactive-elements-in-templates)
 23 | - [ ] [Animating `sb-if`](#animating-sb-if)
 24 | - [x] [Two-way Binding](#skip-two-way-binding) (SKIP)
 25 | - [x] [Nested Components](#done-nested-components)
 26 | - [x] [Defer Directives](#done-defer-ui-updates)
 27 | 
 28 | # Setting `sb-*` props for Strawberry inserted elements
 29 | 
 30 | **Problem** if I have a list of `a` elements which is added by strawberry
 31 | 
 32 | ```html
 33 | <!-- Invalid strawberry but gets the point across -->
 34 | <div sb-mark="links" sb-child="a"></div>
 35 | <script>
 36 |   data.a = [{ name: 'Example', link: 'example.com' }];
 37 | </script>
 38 | ```
 39 | 
 40 | there is no way to set the `href` attribute.
 41 | 
 42 | A **Solution** to this is to have a directive that sets attributes. This along
 43 | with the nested components is a solution.
 44 | 
 45 | ```html
 46 | <div sb-mark="links" sb-child="a">
 47 |   <a sb-mark="links.#.name" sb-attr-href="links.#.link"></a>
 48 | </div>
 49 | <script>
 50 |   data.a = [{ name: 'Example', link: 'example.com' }];
 51 | </script>
 52 | ```
 53 | 
 54 | # Directives for Strawberry Created Elements
 55 | 
 56 | **Problem** is when an element is created and inserted by strawberry, there is
 57 | no way to init the properties of that element.
 58 | 
 59 | This is more of a enhancement than an issue, should strawberry even do this.
 60 | 
 61 | # Logic Encapsulation in Templates
 62 | 
 63 | **Problem** is that scripts inside templates run in the global context. And if
 64 | the template is external, they don't run.
 65 | 
 66 | This means that templates can't have logic ascribed to them.
 67 | 
 68 | # Interactive Elements in Templates
 69 | 
 70 | **Problem** is that templates can have multiple interactive elements, inputs,
 71 | buttons, etc. But accessing these elements requires traversing the Shadow DOM.
 72 | 
 73 | # Animating `sb-if`
 74 | 
 75 | **Problem** is that when `sb-if` causes a elements to be removed it's done using
 76 | `el.replaceWith` which is not animatable.
 77 | 
 78 | # `[DONE]` Defer UI updates
 79 | 
 80 | **Problem** is that currently when an RDO prop is set in a regular `script` tag
 81 | 
 82 | ```html
 83 | <script>
 84 |   const data = sb.init();
 85 |   data.prop = 'value';
 86 | </script>
 87 | ```
 88 | 
 89 | only the elements before the script with the apt `sb-mark` are updated.
 90 | Downstream elements are not updated.
 91 | 
 92 | **Desired behavior** is that all elements are updated. Irrespective of the
 93 | where the script is loaded.
 94 | 
 95 | A **solution** is that when RDO props are set inside the `head` tag, the updates
 96 | are deferred until the ready state changes to `"interactive"`. This happens only
 97 | after the DOM has been parsed but before all assets have been fetched.
 98 | 
 99 | # `[DONE]` Nested Components
100 | 
101 | [PR #9](https://github.com/18alantom/strawberry/pull/9)
102 | 
103 | **Problem** is that currently `sb-mark` on plain elements don't support nesting.
104 | For instance say I have a nested list:
105 | 
106 | ```javascript
107 | data.list = [
108 |   [1, 2],
109 |   ['a', 'b', 'c'],
110 | ];
111 | ```
112 | 
113 | Where I want the outer list items to be rendered in a `ul` and the inner ones
114 | in an `li`.
115 | 
116 | ```html
117 | <section>
118 |   <ul>
119 |     <li>1</li>
120 |     <li>2</li>
121 |   </ul>
122 |   <ul>
123 |     <li>a</li>
124 |     <li>b</li>
125 |     <li>c</li>
126 |   </ul>
127 | </section>
128 | ```
129 | 
130 | if the number of items in the outer list or inner list were fixed, it is
131 | possible to create templates with digit slot names:
132 | 
133 | ```html
134 | <!-- If the inner list has a fixed number of items -->
135 | <template name="example-list">
136 |   <ul>
137 |     <li>
138 |       <slot name="0"></slot>
139 |     </li>
140 |     <li>
141 |       <slot name="1"></slot>
142 |     </li>
143 |   </ul>
144 | </template>
145 | ```
146 | 
147 | or just by using `sb-child`:
148 | 
149 | ```html
150 | <!-- If the outer list has a fixed number of items -->
151 | <ul sb-mark="list.0" sb-child="li"></ul>
152 | <ul sb-mark="list.1" sb-child="li"></ul>
153 | ```
154 | 
155 | But for nested lists with a varying number of items it is not possible without
156 | using JavaScript. This is without even considering the nesting depth.
157 | 
158 | A **solution** is to allow `sb-mark` items to have children that define the
159 | shape of the child:
160 | 
161 | ```html
162 | <section sb-mark="list">
163 |   <!-- ul used for the outer list -->
164 |   <ul>
165 |     <!-- li used for the inner list -->
166 |     <li></li>
167 |   </ul>
168 | </section>
169 | ```
170 | 
171 | This has the added advantage that the markup can be filled with placeholder data
172 | until the actual data loads. And to indicate that these are `sb-child` elements,
173 | they can be marked like so:
174 | 
175 | ```html
176 | <section sb-mark="list">
177 |   <ul sb-mark="list.#">
178 |     <li sb-mark="list.#.#">loading...</li>
179 |   </ul>
180 | </section>
181 | ```
182 | 
183 | _Note: this prevents `"#"` from being used as a valid RDO prop name._
184 | 
185 | # `[SKIP]` Two-way Binding
186 | 
187 | **Problem** is `sb-mark` can't be used on input elements to change their
188 | value when the RDO prop changes, or vice versa.
189 | 
190 | **Solution** is writing a new directive for this:
191 | 
192 | ```javascript
193 | const data = sb.init({
194 |   directives: {
195 |     bind({ el, value, parent, prop }) {
196 |       el.value = value;
197 |       el.oninput ??= (e) => {
198 |         parent[prop] = e.target.value;
199 |       };
200 |     },
201 |   },
202 | });
203 | ```
204 | 
205 | This is trivial, but the question is
206 | 
207 | 1. Should this be in strawberry?
208 | 2. Should this be incorporated into `sb-mark` when element is an input element?
209 | 
210 | Probably not considering, two way binding can be:
211 | 
212 | - lazy: i.e. using a `change` listener
213 | - delayed: assignment takes place only after a time
214 | 
215 | So, instead of inserting the batteries—in the spirit of simplicity—this probably won't be added in.
216 | 


--------------------------------------------------------------------------------
/dist.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # This file runs on yarn build. It converts index.ts to
 4 | # minified javascript sb.min.js and adds the copyright
 5 | # header file.
 6 | #
 7 | # Finally it prints the normal and gzipped sizes of the file.
 8 | 
 9 | rm -rf dist
10 | mkdir dist
11 | 
12 | version=$(cat package.json | grep '"version"' | cut -d'"' -f4)
13 | file_path="dist/sb.min.js"
14 | file_header="/* Strawberry $version
15 |  * Copyright (c) 2023-present, Alan Tom (18alantom)
16 |  * MIT License
17 |  * This is a generated file. Do not edit.*/"
18 | 
19 | echo "$file_header" >> "$file_path"
20 | node_modules/.bin/esbuild ./index.ts --bundle --minify --format=iife --global-name=sb >> "$file_path"
21 | 
22 | size=$(wc -c < $file_path)
23 | gzsize=$(gzip -c $file_path | wc -c)
24 | 
25 | kb=$(echo "scale=3; $size / 1024" | bc)
26 | gzkb=$(echo "scale=3; $gzsize / 1024" | bc)
27 | 
28 | echo "dist/sb.min.js is ${kb}KB and gzipped ${gzkb}KB"
29 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Docs
 2 | 
 3 | Strawberry is a simple frontend framework that gives you reactivity and
 4 | composability.
 5 | 
 6 | Here's the documentation index:
 7 | 
 8 | 1. [Installation](./installation.md): explains how to pull Strawberry code into your web project.
 9 | 2. [Getting Started](./getting_started.md): describes a simple example with code walk through.
10 | 3. [Reactivity](./reactivity/README.md): explains what is reactivity in Strawberry.
11 |    1. [Reactive Values](./reactivity/reactive_values.md): explains keys and values of the reactive object.
12 |    2. [Mark (`sb-mark`)](./reactivity/mark.md): explains how to mark an element to update along with data.
13 |    3. [Conditionals (`sb-if`, `sb-ifnot`)](./reactivity/conditionals.md): explains how to render or hide an element when data changes to truthy or falsy.
14 |    4. [Computed](./reactivity/computed.md): explains how to define reactive values that depend on other reactive values.
15 |    5. [Directives](./reactivity/directives.md): explains how to extend Strawberry with custom directives.
16 | 4. Composability (to be added)
17 | 5. [API](./api.md): lists all of Strawberry's defined directives and methods.
18 | 
19 | If you want to get a quick round up of Strawberry check the
20 | [Getting Started](./getting_started.md) page. The remaining pages dwell deeper
21 | into individual topics and will be more clear after you have familiarized yourself
22 | with the basics.
23 | 


--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
  1 | # Strawberry API
  2 | 
  3 | This page lists the available strawberry directives and exported methods.
  4 | 
  5 | 1. **Directives**: set on elements `<tag sb-directive="key"></tag>`
  6 |    1. [`sb-mark`](#sb-mark): mark element as reactive.
  7 |    2. [`sb-if`](#sb-if): render element if data is truthy.
  8 |    3. [`sb-ifnot`](#sb-ifnot): render element if data is falsy.
  9 | 2. **Methods**: called from the global `sb` object.
 10 |    1. [`init`](#init): initialize strawberry.
 11 |    2. [`directive`](#directive): register a custom directive.
 12 |    3. [`watch`](#watch): watch data for changes.
 13 |    4. [`unwatch`](#unwatch): stop watching data for changes.
 14 |    5. [`register`](#register): register custom components.
 15 |    6. [`load`](#load): load components from external files.
 16 |    7. [`prefix`](#prefix): change prefix `"sb"` to a custom value.
 17 | 
 18 | ## Directives
 19 | 
 20 | Note this section is mentioned only completeness. for a more detailed
 21 | information on the items in this section check out the documentation on
 22 | [reactivity](./reactivity/README.md).
 23 | 
 24 | ### `sb-mark`
 25 | 
 26 | [Detailed documentation](./reactivity/mark.md)
 27 | 
 28 | Used to mark an element with a key which will allow the element to be updated
 29 | when the respective data changes.
 30 | 
 31 | ```html
 32 | <p sb-mark="message">...</p>
 33 | <script>
 34 |   data.message = 'Hello, World';
 35 | </script>
 36 | ```
 37 | 
 38 | ### `sb-if`
 39 | 
 40 | [Detailed documentation](./reactivity/conditionals.md)
 41 | 
 42 | Used to render an element when the respective data value is truthy.
 43 | 
 44 | ```html
 45 | <p sb-if="show">Hello, World!</p>
 46 | <script>
 47 |   data.show = true;
 48 | </script>
 49 | ```
 50 | 
 51 | ### `sb-ifnot`
 52 | 
 53 | [Detailed documentation](./reactivity/conditionals.md)
 54 | 
 55 | Used to render an element when the respective data value is falsy.
 56 | 
 57 | ```html
 58 | <p sb-ifnot="show">Hello, World!</p>
 59 | <script>
 60 |   data.show = false;
 61 | </script>
 62 | ```
 63 | 
 64 | ## Methods
 65 | 
 66 | If strawberry has been loaded correctly then all the methods mentioned in this
 67 | section should be available on the global `sb` object.
 68 | 
 69 | ### `init`
 70 | 
 71 | ```typescript
 72 | function init(): ReactiveObject;
 73 | ```
 74 | 
 75 | > **Info**
 76 | >
 77 | > `ReactiveObject` is not a specific type, it is an object that looks like a
 78 | > regular JavaScript object but has reactive properties. For details check the
 79 | > [Reactive Values](./reactivity/reactive_values.md) page.
 80 | 
 81 | Used to initialize strawberry. Calling it does the following things:
 82 | 
 83 | - Returns a reactive object which is used to store all [reactive data](./reactivity/README.md) in a Strawberry app.
 84 | - Registers defined components.
 85 | 
 86 | ```html
 87 | <p sb-mark="message"></p>
 88 | <script>
 89 |   const data = sb.init();
 90 |   data.message = 'Hello, World!';
 91 | </script>
 92 | ```
 93 | 
 94 | When `sb.init` is called all templates elements with a name attribute are
 95 | registered. Strawberry checks for component templates once again after the
 96 | document is done loading, so it's alright to call `sb.init` in the `<head>`
 97 | element of a document.
 98 | 
 99 | > **Info**
100 | >
101 | > Calling `sb.init` will always return the same reactive object so there is no
102 | > point in calling it multiple times. If you want to register components after
103 | > loading you should instead use `sb.register` or `sb.load`.
104 | 
105 | ### `directive`
106 | 
107 | [Detailed documentation](./reactivity/directives.md)
108 | 
109 | ```typescript
110 | function directive(
111 |   name: string,
112 |   cb: Directive,
113 |   isParametric: value = false
114 | ): void;
115 | 
116 | type Directive = (params: {
117 |   el: Element; // The element to which the directive has been applied.
118 |   value: unknown; // The updated value.
119 |   key: string; // Period '.' delimited key that points to the value in the global data object.
120 |   isDelete: boolean; // Whether the value was deleted `delete data.prop`.
121 |   parent: Prefixed<object>; // The parent object to which the value belongs (the proxied object, unless isDelete).
122 |   prop: string; // Property of the parent which points to the value, `parent[prop] ≈ value`
123 |   param: string | undefined; // If directive is a parametric directive, `param` is passed
124 | }) => void;
125 | ```
126 | 
127 | - `name`: the name of the directive being registered
128 | - `cb`: the directive callback function
129 | - `isParametric`: whether the directive is a parametric directive
130 | 
131 | Used to register a custom directive. For example here is a two way bind directive:
132 | 
133 | ```html
134 | <script>
135 |   sb.directive('bind', ({ el, value, parent, prop }) => {
136 |     el.value = value;
137 |     el.oninput ??= (e) => {
138 |       parent[prop] = e.target.value;
139 |     };
140 |   });
141 | </script>
142 | <input type="text" sb-bind="message" />
143 | ```
144 | 
145 | ### `watch`
146 | 
147 | ```typescript
148 | function watch(key: string, watcher: Watcher): void;
149 | type Watcher = (newValue: unknown) => any;
150 | ```
151 | 
152 | - `key`: dot separated string for a value in the reactive object
153 | - `watcher`: function that is called when watched value changes, it receives the `newValue` that is set
154 | 
155 | Used to set watcher function that is called when a watched value or its child
156 | value changes. For example:
157 | 
158 | ```javascript
159 | data.a = { b: '' };
160 | 
161 | sb.watch('a.b', (v) => console.log(`b changed to: ${v}`));
162 | sb.watch('a', (v) => console.log(`a changed to: ${v}`));
163 | 
164 | data.a.b = 'Hello, World';
165 | 
166 | // b changed to: Hello, World
167 | // a changed to: [object Object]
168 | ```
169 | 
170 | Note: in the above example even the second watcher is triggered because `b` is a
171 | property (child value) of `a`.
172 | 
173 | > **Warning**
174 | >
175 | > Watchers should not alter the reactive object. If a dependent value is
176 | > required then a [`computed`](./reactivity/computed.md) value should be used.
177 | 
178 | ### `unwatch`
179 | 
180 | ```typescript
181 | function unwatch(key?: string, watcher?: Watcher): void;
182 | ```
183 | 
184 | - `key`: key from which watchers are to be removed.
185 | - `watcher`: specific watcher which is to be removed.
186 | 
187 | Used to remove watchers. Watchers are removed depending on the args passed:
188 | 
189 | - Only `key`: all watchers registered under the passed `key` are removed.
190 | - Only `watcher`: `watcher` is removed from all keys.
191 | - Both: `watcher` found registered with `key` is removed.
192 | - Neither: all watchers are removed.
193 | 
194 | Example:
195 | 
196 | ```javascript
197 | sb.unwatch('a.b');
198 | ```
199 | 
200 | ### `register`
201 | 
202 | ```typescript
203 | function register(): void;
204 | function register(parentElement: HTMLElement): void;
205 | function register(template: string): void;
206 | function register(templateString: string[], ...args: unknown): void;
207 | ```
208 | 
209 | Used to register custom components in Strawberry. These components can be
210 | defined dynamically after a document has completed loading.
211 | 
212 | It can be called in multiple ways:
213 | 
214 | 1.  **Without args**: This will register all the components found in html
215 |     document.
216 | 
217 |     ```javascript
218 |     sb.register();
219 |     ```
220 | 
221 | 2.  **Passing the parent element**: This will register all the components found
222 |     inside the passed `parentElement`.
223 | 
224 |     ```javascript
225 |     sb.register(parentElement);
226 |     ```
227 | 
228 | 3.  **As a tag function**: This allows for dynamically creating templates with
229 |     interpolated values and expressions.
230 | 
231 |     ```javascript
232 |     sb.register`
233 |          <template name="colored-p">
234 |            <p style="font-family: sans-serif; color: ${color};">
235 |              <slot />
236 |            </p>
237 |          </template>`;
238 |     ```
239 | 
240 | 4.  **Passing the component string**: Functionally, it is the same as using it
241 |     as a tagged function.
242 |     ```javascript
243 |     sb.register(`<template name="colored-p">
244 |            <p style="font-family: sans-serif; color: ${color};">
245 |              <slot />
246 |            </p>
247 |          </template>`);
248 |     ```
249 | 
250 | > **Warning**
251 | >
252 | > Once an element has been registered by a particular name, it cannot be
253 | > re-registered, `sb-register` will skip over registered elements and only
254 | > register the ones that have not been registered.
255 | 
256 | > **Info**
257 | >
258 | > If your components have been defined statically before the document finished
259 | > loading (i.e. before `document.readyState` becomes `"interactive"`) then you
260 | > don't need to call `sb.register`.
261 | 
262 | ### `load`
263 | 
264 | ```typescript
265 | function load(files: string | string[]): Promise<void>;
266 | ```
267 | 
268 | - `files`: Path to a single file from the calling folder or a list of files.
269 | 
270 | Used to load components from external files. For example if you have the
271 | following folder structure:
272 | 
273 | ```
274 | .
275 | ├── index.html
276 | └── components.html
277 | ```
278 | 
279 | Where `index.html` is your main HTML file that will be served, and
280 | `components.html` contains your templates. You can load the components in
281 | `index.html` using `sb.load` like so:
282 | 
283 | ```javascript
284 | sb.load('components.html');
285 | ```
286 | 
287 | ### `prefix`
288 | 
289 | ```typescript
290 | function prefix(value: string = 'sb'): void;
291 | ```
292 | 
293 | - `value`: value to use for prefix, defaults to `'sb'`
294 | 
295 | Used to override the default (`'sb'`) prefix for directives, for example
296 | if you want to use data attributes to manage directives you can do this:
297 | 
298 | ```html
299 | <script>
300 |   sb.prefix('data-sb');
301 | </script>
302 | <p data-sb-mark="message"></p>
303 | ```
304 | 


--------------------------------------------------------------------------------
/docs/getting_started.md:
--------------------------------------------------------------------------------
  1 | # Getting Started
  2 | 
  3 | Let's start with a simple example, I'll explain what's going on after I show you the code.
  4 | 
  5 | **Index**
  6 | 
  7 | 1. [Example](#example)
  8 | 2. [Explanation](#explanation)
  9 | 
 10 | ## Example
 11 | 
 12 | The example code sets up a simple web page with a counter that increments on
 13 | clicking a button and also displays an updating message.
 14 | 
 15 | You can copy-paste it into a `.html` file and open it in a browser to see how it
 16 | works.
 17 | 
 18 | ```html
 19 | <!-- 1. Link Strawberry -->
 20 | <head>
 21 |   <script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>
 22 | </head>
 23 | 
 24 | <!-- 2. Define a Component -->
 25 | <template name="cool-button">
 26 |   <button
 27 |     style="
 28 |         padding: 0.5rem 1rem;
 29 |         border: 2px solid black;
 30 |         border-radius: 0px;
 31 |         box-shadow: 4px 4px 0px gray;
 32 |       "
 33 |   >
 34 |     <slot />
 35 |   </button>
 36 | </template>
 37 | 
 38 | <!-- 3. Initialize Strawberry -->
 39 | <script>
 40 |   const data = sb.init();
 41 |   data.counter = 0;
 42 | </script>
 43 | 
 44 | <!-- 4. Use the Component -->
 45 | <body>
 46 |   <cool-button sb-mark="message" onclick="data.counter += 1">
 47 |     loading...
 48 |   </cool-button>
 49 | </body>
 50 | 
 51 | <!-- 5. Update the Component -->
 52 | <script>
 53 |   data.message = () => `Clicked ${data.counter} times`;
 54 | </script>
 55 | ```
 56 | 
 57 | ## Explanation
 58 | 
 59 | In the above example we are rendering a button component called `cool-button`
 60 | which on clicking increments `counter` and which updates the button's
 61 | `innerText`.
 62 | 
 63 | I have added comments that to mark sections of the code above, I'll explain
 64 | what's going on in each of them:
 65 | 
 66 | ### 1. Link Strawberry
 67 | 
 68 | ```html
 69 | <head>
 70 |   <script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>
 71 | </head>
 72 | ```
 73 | 
 74 | This loads and runs the `sb.min.js` file from unpkg. On doing this, the `sb`
 75 | object becomes available in the global scope. You can open the console, type
 76 | `sb` and check that it is defined.
 77 | 
 78 | **Documentation Link**:
 79 | 
 80 | - [Installation](./installation.md)
 81 | 
 82 | ### 2. Define Component
 83 | 
 84 | ```html
 85 | <template name="cool-button">
 86 |   <button
 87 |     style="
 88 |         padding: 0.5rem 1rem;
 89 |         border: 2px solid black;
 90 |         border-radius: 0px;
 91 |         box-shadow: 4px 4px 0px gray;
 92 |       "
 93 |   >
 94 |     <slot />
 95 |   </button>
 96 | </template>
 97 | ```
 98 | 
 99 | This defines a component inside a `template` tag with the name attribute
100 | deciding what the component will be called (`"cool-button"`). The component
101 | defined is a button component with some styling added to it.
102 | 
103 | **Documentation Link**:
104 | 
105 | - [Register Components](./api.md#register)
106 | 
107 | ### 3. Initialize Strawberry
108 | 
109 | ```html
110 | <script>
111 |   const data = sb.init();
112 |   data.counter = 0;
113 | </script>
114 | ```
115 | 
116 | This calls `sb.init` to do two things:
117 | 
118 | 1. Register our defined components (i.e. `cool-button`).
119 | 2. Returns the reactive object `data` which updates UI when its values change.
120 | 
121 | Along with that we are also initializing `data.counter` with the value `0`.
122 | 
123 | **Documentation Links**:
124 | 
125 | - [Initialization using `init`](./api.md#init)
126 | - [Reactivity](./reactivity/README.md)
127 | 
128 | ### 4. Use the Component
129 | 
130 | ```html
131 | <body>
132 |   <cool-button sb-mark="message" onclick="data.counter += 1">
133 |     loading...
134 |   </cool-button>
135 | </body>
136 | ```
137 | 
138 | Use the `cool-button` component to display a button. Here two things are going on:
139 | 
140 | 1. `sb-mark="message"`: this attribute means "whenever `data.message` changes, update the `innerText` of this component.""
141 | 2. `onclick="data.counter += 1"`: this is an inline function that increments `data.counter` that was defined in section
142 | 
143 | > **Info**
144 | >
145 | > You can also use some other way of adding an event listener.
146 | > [For example, by using a directive](./reactivity/directives.md#example-event-listeners-using-a-directive).
147 | > I've used this for brevity.
148 | 
149 | ### 5. Update the Component
150 | 
151 | ```html
152 | <script>
153 |   data.message = () => `Clicked ${data.counter} times`;
154 | </script>
155 | ```
156 | 
157 | This finally just defines what the `message` from `sb-mark="message"` is. Here
158 | the message is a function that depends on `data.counter`, i.e. it is a _computed property_.
159 | 
160 | Which means whenever `data.counter` changes the value of message changes too.
161 | 
162 | Now whenever you click on the `cool-button`, the following things happen
163 | 
164 | 1. `counter` increments.
165 | 2. `data.counter` is re-run because it depends on `counter`.
166 | 3. the value of `data.counter` is used to set the `innerText` of `cool-button`.
167 | 
168 | > **Info**
169 | >
170 | > Since `data.message` is a computed property, the following is true.
171 | >
172 | > ```javascript
173 | > typeof data.message === 'string';
174 | > ```
175 | 
176 | **Documentation Links**:
177 | 
178 | - [Computed Values](./reactivity/computed.md)
179 | 


--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | 
 3 | There are a couple of ways you can setup Strawberry
 4 | 
 5 | **Index**
 6 | 
 7 | 1. [Strawberry Starter](#strawberry-starter)
 8 | 2. [Self Setup](#self-setup)
 9 | 
10 | ## Strawberry Starter
11 | 
12 | The quickest way to get started is to run this command:
13 | 
14 | ```bash
15 | curl -so- https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh | bash
16 | ```
17 | 
18 | This will run a [tiny bash script](https://github.com/18alantom/strawberry/blob/main/setup.sh) that sets up a simple starter page using Strawberry.
19 | 
20 | ## Self Setup
21 | 
22 | If you want to add the functionality of Strawberry to an existing `html` document. You do two things:
23 | 
24 | Add a link to Strawberry to you html's `head` tag:
25 | 
26 | ```html
27 | <script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>
28 | ```
29 | 
30 | Or you can download [this file](https://raw.githubusercontent.com/18alantom/strawberry/main/dist/sb.min.js) and add a `script:src` that links to the copy.
31 | 


--------------------------------------------------------------------------------
/docs/reactivity/README.md:
--------------------------------------------------------------------------------
 1 | # Reactivity
 2 | 
 3 | Reactivity is the crux of Strawberry, for a quick brief on what reactivity is
 4 | consider the following example:
 5 | 
 6 | ```html
 7 | <p sb-mark="message">...</p>
 8 | <script>
 9 |   data.message = 'Hello, World';
10 | </script>
11 | ```
12 | 
13 | In the above example, when `data.message` is updated the inner text of the `<p>`
14 | element is also updated. This is due to Strawberry's reactivity, i.e.
15 | _when the data updates, update the UI_.
16 | 
17 | Reactive depends on two things, what data is set/updated, and how the UI is to
18 | be updated. The reactivity section of the documentation has been divided as
19 | such:
20 | 
21 | - **What data is set/updated**
22 |   1. [Reactive Values](./reactive_values.md)
23 |   2. [Computed](./computed.md)
24 | - **How the UI is to be updated**
25 |   1. [Mark (`sb-if`)](./mark.md)
26 |   2. [Conditionals (`sb-if`, `sb-ifnot`)](./mark.md)
27 |   3. [Directives](./directives.md)
28 | 
29 | ## Setting and updating the data
30 | 
31 | For a piece of data to be considered reactive, it should be set on Strawberry's
32 | reactive object:
33 | 
34 | ```javascript
35 | const data = sb.init();
36 | ```
37 | 
38 | The object `data` that is returned on initialization is a reactive object. This
39 | means that any value that is set on `data` will update the appropriate UI.
40 | 
41 | Data works with the following types of values:
42 | 
43 | 1. Regular objects. [documentation](reactive_values.md#objects-and-arrays)
44 | 2. Regular arrays for loops. [documentation](reactive_values.md#objects-and-arrays)
45 | 3. Functions used for computed values. [documentation](computed.md)
46 | 
47 | ## Updating the UI
48 | 
49 | There are a couple of ways Strawberry updates the UI on data change:
50 | 
51 | - `sb-mark`: used for setting content of an element. [documentation](mark.md)
52 | - `sb-if`: used for adding or removing an element if the value is _truthy_. [documentation](conditionals.md)
53 | - `sb-ifnot`: used for adding or removing an element if the value is _falsy_. [documentation](conditionals.md)
54 | 
55 | All three of the above are called _directives_, you can add custom directives to
56 | Strawberry, check the [documentation](directives.md).
57 | 


--------------------------------------------------------------------------------
/docs/reactivity/computed.md:
--------------------------------------------------------------------------------
  1 | # Computed
  2 | 
  3 | Computed values are values that have been calculated from other values. Consider this example:
  4 | 
  5 | ```javascript
  6 | let a = 10;
  7 | let b = 20;
  8 | 
  9 | const c = () => a + b;
 10 | ```
 11 | 
 12 | Here, `c` is a function that returns a computed value. The function has two
 13 | variable dependencies `a` and `b` i.e. when either of them change, the value of
 14 | `c()` also changes.
 15 | 
 16 | **Index**
 17 | 
 18 | 1. [Computed values are functions](#computed-values-are-functions)
 19 | 2. [Elements can be marked by computed values](#elements-can-be-marked-by-computed-values)
 20 | 3. [Computed functions can use `this`](#computed-functions-can-use-this)
 21 | 4. [Functions can be returned from computed functions](#function-can-be-returned-from-computed-functions)
 22 | 5. [Computed functions can be async](#computed-functions-can-be-async)
 23 | 6. [Additional points regarding computed](#additional-points-regarding-computed)
 24 | 
 25 | ## Computed values are functions
 26 | 
 27 | In Strawberry computed values are obtained by setting functions on the reactive object:
 28 | 
 29 | ```javascript
 30 | // data is the reactive object
 31 | const data = sb.init();
 32 | 
 33 | data.a = 10;
 34 | data.b = 20;
 35 | 
 36 | data.c => () => data.a + data.b;
 37 | ```
 38 | 
 39 | After setting a function for a computed value, you don't need to call it to get
 40 | the value:
 41 | 
 42 | ```javascript
 43 | data.c === 30; // evaluates to true
 44 | ```
 45 | 
 46 | You can update the function for the computed value by setting a new value to the
 47 | property:
 48 | 
 49 | ```javascript
 50 | data.c => () => (data. a + data.b) / 10;
 51 | 
 52 | data.c === 3; // evaluates to true
 53 | ```
 54 | 
 55 | > **Warning**
 56 | >
 57 | > Dependencies of a computed value should be defined before the computed value
 58 | > is defined. Else the computed value will not be evaluated properly and you
 59 | > might end up with incorrect values.
 60 | 
 61 | ## Elements can be marked by computed values
 62 | 
 63 | Say you have an element marked by a computed value:
 64 | 
 65 | ```html
 66 | <p sb-mark="c">0</p>
 67 | 
 68 | <script>
 69 |   data.a = 10;
 70 |   data.c = () => data.a + 10;
 71 | </script>
 72 | ```
 73 | 
 74 | The element is updated when you:
 75 | 
 76 | 1. Set the computed value's function.
 77 | 2. update a dependency of the computed value.
 78 | 
 79 | In the above example setting `data.c` will update the inner text of the `<p>`
 80 | element to `'20'`. Similarly if you update the dependency `data.a`, eg
 81 | `data.a = 5` the inner text will again be updated, in this case to `"15"`.
 82 | 
 83 | ## Computed functions can use `this`
 84 | 
 85 | Up until now the computed functions have directly accessed the `data` object. You
 86 | can instead use `this` to access the reactive object that contains the computed
 87 | function:
 88 | 
 89 | ```javascript
 90 | data.a = 10;
 91 | data.c = function () {
 92 |   return this.a + 10;
 93 | };
 94 | ```
 95 | 
 96 | > **Warning**
 97 | >
 98 | > This is not possible using arrow functions (i.e `() => {}`) because they can't
 99 | > be bound to their own `this` value. So you need to use regular functions for
100 | > `this`.
101 | 
102 | The benefit of this is you can:
103 | 
104 | 1. Reuse functions
105 | 2. Not have to rely on long value access expressions
106 | 
107 | For example:
108 | 
109 | ```javascript
110 | data.users = [];
111 | function isOldEnough() {
112 |   return this.age > 30;
113 | }
114 | 
115 | function addUser(name, age) {
116 |   data.users.push({ name, age, isOldEnough });
117 | }
118 | 
119 | addUsers('Flo', 28);
120 | addUsers('Max', 55);
121 | 
122 | data.users[0].isOldEnough; // false
123 | data.users[1].isOldEnough; // true
124 | ```
125 | 
126 | ## Function can be returned from computed functions
127 | 
128 | If your computed function returns a function then it is returned as it is, i.e.
129 | without being called like a computed value.
130 | 
131 | ```javascript
132 | function onClickHandler() {
133 |   /* event listener logic*/
134 | }
135 | 
136 | data.handler = () => onClickHandler;
137 | 
138 | typeof data.handler === 'function'; // evaluates to true
139 | ```
140 | 
141 | This is useful for associating a function with an element. For instance by
142 | creating a custom directive to assign event listeners to elements.
143 | 
144 | ## Computed functions can be `async`
145 | 
146 | If your computed function depends on pulling data from some async source you
147 | can use an `async` function instead:
148 | 
149 | ```javascript
150 | data.item = 'Matchbox';
151 | data.isInStock = async () => {
152 |   const quantity = await getStockQuantity(data.item);
153 |   return quantity > 0;
154 | };
155 | ```
156 | 
157 | In the above example when `data.item` is updated, the function `isInStock` is
158 | called and when the returned `Promise` is resolved all the directives marked
159 | using `"isInStock"` are evaluated with the resolved value.
160 | 
161 | > **Note**
162 | >
163 | > Accessing `data.isInStock` will still return a `Promise` that will have to be
164 | > awaited.
165 | 
166 | ## Additional points regarding computed
167 | 
168 | **Note**: you don't need to know this stuff, but if you find that computed is not
169 | functioning as expected then these points will help in debugging the issue.
170 | 
171 | - Computed values won't update if computed dependencies are deleted.
172 | - Accessing computed values with missing or incorrect dependencies (e.g after
173 |   deleting or after reassigning a dependency) may result in an error or
174 |   unexpected values.
175 | - Computed functions are executed once when set to evaluate dependencies.
176 | - If a codeblock in a computed function has a dependency, and that block is not
177 |   executed when the computed function called, the dependency is not counted.
178 | 


--------------------------------------------------------------------------------
/docs/reactivity/conditionals.md:
--------------------------------------------------------------------------------
  1 | # Conditionals
  2 | 
  3 | This page is about the details of Strawberry's conditional directives `sb-if`
  4 | and `sb-ifnot`. If you haven't checked the [Getting Started](../getting_started.md)
  5 | and the [Reactivity](./README.md) pages, I'd suggest doing so first.
  6 | 
  7 | **Index**
  8 | 
  9 | 1. [Conditional Rendering](#conditional-rendering)
 10 | 2. [Hidden default state](#hidden-default-state)
 11 | 3. [Conditionally Rendering Lists](#conditionally-rendering-lists)
 12 | 
 13 | ## Conditional Rendering
 14 | 
 15 | When you want to show or hide an element on the basis of some data value, you
 16 | can use one of Strawberry's conditional directives `sb-if` and `sb-ifnot`.
 17 | 
 18 | ```html
 19 | <div sb-if="hasMessage">
 20 |   <p>You have a message.</p>
 21 | </div>
 22 | 
 23 | <script>
 24 |   data.hasMessage = true;
 25 | </script>
 26 | ```
 27 | 
 28 | In the above example the `<div>` element will be rendered cause
 29 | `data.hasMessage` is set to `true`.
 30 | 
 31 | An element with an `sb-if` or `sb-ifnot` can have two default states:
 32 | 
 33 | - **Visible default state**: element is visible until value is set.
 34 | - **Hidden default state**: element is hidden until the value is set.
 35 | 
 36 | _Note: in the example shown, the `<div>` element has a visible default state._
 37 | 
 38 | ## Hidden default state
 39 | 
 40 | In the example below, the `<div>` element has a visible default state.
 41 | 
 42 | ```html
 43 | <div sb-if="hasMessage">
 44 |   <p>You have a message.</p>
 45 | </div>
 46 | 
 47 | <script>
 48 |   data.hasMessage = false;
 49 | </script>
 50 | ```
 51 | 
 52 | Due to this, the `<div>` element will be rendered until the value of
 53 | `data.hasMessage` has been evaluated. Which in this case is `false`, this may be
 54 | undesirable behaviour and you can avoid this by wrapping the element in a
 55 | `<template>` tag:
 56 | 
 57 | ```html
 58 | <template sb-if="hasMessage">
 59 |   <div>
 60 |     <p>You have a message.</p>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 |   data.hasMessage = false;
 66 | </script>
 67 | ```
 68 | 
 69 | Now the element will not be rendered until `data.hasMessage` is set to `true`.
 70 | 
 71 | ## Conditionally Rendering Lists
 72 | 
 73 | Lists can be conditionally rendered in two ways:
 74 | 
 75 | 1. Directive placed on parent.
 76 | 2. Directive placed on the list item.
 77 | 
 78 | When the directive is **placed on the parent**, for example:
 79 | 
 80 | ```html
 81 | <div sb-if="show">
 82 |   <p sb-mark="list.#"></p>
 83 | </div>
 84 | 
 85 | <script>
 86 |   data.show = true;
 87 |   data.list = ['a', 'b'];
 88 | </script>
 89 | ```
 90 | 
 91 | Setting the value of `data.show` will hide or render the the `<div>` element and
 92 | all its children with it.
 93 | 
 94 | If you want to hide only certain children, you can place the directive on the list item instead:
 95 | 
 96 | ```html
 97 | <div sb-mark="list.#">
 98 |   <p sb-mark="list.#.value" sb-ifnot="list.#.hide"></p>
 99 | </div>
100 | 
101 | <script>
102 |   data.list = [
103 |     { value: 'a', hide: false },
104 |     { value: 'b', hide: true },
105 |   ];
106 | </script>
107 | ```
108 | 
109 | Now you can hide specific list items like so:
110 | 
111 | ```javascript
112 | data.list[0].hide = true;
113 | ```
114 | 


--------------------------------------------------------------------------------
/docs/reactivity/directives.md:
--------------------------------------------------------------------------------
  1 | # Directives
  2 | 
  3 | The crux of Strawberry is reactivity which is easily described as:
  4 | _When my data changes do `x`_
  5 | 
  6 | In Strawberry things (i.e. `x`) are done by using **directives**. For example:
  7 | 
  8 | - `sb-mark` is a directive that sets the inner text of an element when the value in the RDO changes.
  9 | - `sb-if` is a directive that inserts or removes an element depending on the truthy-ness of the value.
 10 | 
 11 | Directives can be used to extend the functionality of strawberry.
 12 | 
 13 | **Index**
 14 | 
 15 | 1. [Directive is a function](#directive-is-a-function)
 16 | 2. [Directive is called on data change](#directive-is-called-on-data-change)
 17 | 3. [Directives can be registered using `sb.directive`](#directives-can-be-registered-using-sbdirective)
 18 | 4. [Example: Two-way binding using a directive](#example-two-way-binding-using-a-directive)
 19 | 5. [Directives can have parameters](#directives-can-have-parameters)
 20 | 6. [Example: Event listeners using a directive](#example-event-listeners-using-a-directive)
 21 | 
 22 | ## Directive is a function
 23 | 
 24 | You can add all sorts of additional functionality to Strawberry by using
 25 | directives. A directive is a function with the following signature:
 26 | 
 27 | ```typescript
 28 | type Directive = (params: DirectiveParams) => void;
 29 | 
 30 | type DirectiveParams = {
 31 |   // Element on which the directive has been set.
 32 |   el: Element;
 33 | 
 34 |   // Updated value.
 35 |   value: unknown;
 36 | 
 37 |   // Period '.' delimited key of the value in the RDO.
 38 |   key: string;
 39 | 
 40 |   // Whether the value was deleted `delete data.prop`.
 41 |   isDelete: boolean;
 42 | 
 43 |   // Parent object to which the value belongs (the proxied object).
 44 |   parent: Record<string, unknown>;
 45 | 
 46 |   // Property of the parent which points to the value `parent[prop] ≈ value`
 47 |   prop: string;
 48 | };
 49 | ```
 50 | 
 51 | ## Directive is called on data change
 52 | 
 53 | A directive function is called whenever the value of the mentioned key changes
 54 | in the RDO.
 55 | 
 56 | For example, in `sb-mark="form.title"`, `form.title` is the key of a value in
 57 | the RDO i.e. `data.form.title` and when this is set or changes or is deleted,
 58 | the directive is called.
 59 | 
 60 | ## Directives can be registered using `sb.directive`
 61 | 
 62 | ```typescript
 63 | sb.directive(
 64 |   // Name of the directive
 65 |   name: string,
 66 | 
 67 |   // The callback function of the directive
 68 |   cb: Directive,
 69 | 
 70 |   // Whether the directive is parametric
 71 |   isParametric: boolean
 72 | ): void;
 73 | ```
 74 | 
 75 | To register a directive, you can use the `sb.directive` function.
 76 | 
 77 | ```javascript
 78 | sb.directive('somedirective', () => {
 79 |   /* ... */
 80 | });
 81 | ```
 82 | 
 83 | This can now be used like so:
 84 | 
 85 | ```html
 86 | <p sb-somedirective="value"></p>
 87 | <script>
 88 |   data.value = '...';
 89 | </script>
 90 | ```
 91 | 
 92 | ## Example: Two-way binding using a directive
 93 | 
 94 | Let's implement _two-way binding_ by using directives.
 95 | 
 96 | <summary>
 97 | <detail> What is <em>two-way binding</em>?</detail>
 98 | 
 99 | In short, _two-way binding_ is a binding between data and a some input element, so:
100 | 
101 | 1. When the data value changes, the value in the input should change.
102 | 2. When the input value changes, it should update the data value.
103 | 
104 | For example:
105 | 
106 | ```html
107 | <input type="text" for="name" />
108 | <script>
109 |   data.name = '';
110 | </script>
111 | ```
112 | 
113 | When user changes the value in `input[for="name"]` the value of `data.name`
114 | should change, and when we change the value of `data.name` the value of `input[for="name"]`
115 | should change.
116 | 
117 | </summary>
118 | 
119 | For this we'll write a simple directive called bind:
120 | 
121 | ```javascript
122 | sb.directive('bind', ({ el, value, parent, prop }) => {
123 |   el.value = value;
124 |   el.oninput ??= (e) => {
125 |     parent[prop] = e.target.value;
126 |   };
127 | });
128 | ```
129 | 
130 | Let's go over what's happening here:
131 | 
132 | ### 1. Setting the input value
133 | 
134 | ```javascript
135 | el.value = value;
136 | ```
137 | 
138 | Since the directive is called only when the value in the RDO changes, we can
139 | directly use this value, stored in the `value` arg to set the input elements
140 | [value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#value).
141 | 
142 | ### 2. Setting the data value
143 | 
144 | ```javascript
145 | el.oninput ??= (e) => {
146 |   parent[prop] = e.target.value;
147 | };
148 | ```
149 | 
150 | Since the directive can be called multiple times, we want to add an `oninput`
151 | listener to the `inputElement` only once (Hence the `??=` which checks if a
152 | value is set before setting it).
153 | 
154 | And in the input listener, we set the data value, here `parent` is the RDO that
155 | contains `value`, i.e. `parent[prop] === value` and since `parent` is an RDO
156 | setting a value to it will trigger changes related to `parent[prop]`
157 | 
158 | ### Using the bind directive
159 | 
160 | Once, it has been defined, you can use it like so:
161 | 
162 | ```html
163 | <p>Hello, <span sb-mark="name"></span></p>
164 | <input type="text" sb-bind="name" />
165 | 
166 | <script>
167 |   data.name = 'Fyo';
168 | </script>
169 | ```
170 | 
171 | Now if you update `input`, the value in the `span` will change too. And if you
172 | update `data.name` both the `input` and the `span` values will change.
173 | 
174 | > **Warning**
175 | >
176 | > The`parent` arg passed to a directive is the reactive object. So setting a
177 | > value on it without checks can cause recursion.
178 | >
179 | > In the `bind` example above since `parent[prop]` is set inside the input
180 | > listener, recursion does not take place.
181 | 
182 | ## Directives can have parameters
183 | 
184 | Parametric directives are directives that can have parameters, it can be defined
185 | by passing `true` as the third arg of the `sb.directive` function:
186 | 
187 | ```javascript
188 | sb.directive(
189 |   'parametric',
190 |   ({ el, value, key, param }) => {
191 |     /* parametric directive logic */
192 |   },
193 |   true // registers directive as a parametric directive
194 | );
195 | ```
196 | 
197 | and then can be used like so:
198 | 
199 | ```html
200 | <p sb-parametric="directiveKey:directiveParameter"></p>
201 | <script>
202 |   sb.directiveKey = 'directiveValue';
203 | </script>
204 | ```
205 | 
206 | In the above example the directive call back function will receive the following values:
207 | 
208 | ```javascript
209 | {
210 |   el:    HTMLParagraphElement,
211 |   value: 'directiveValue',
212 |   key:   'directiveKey',
213 |   param: 'directiveParameter'
214 | }
215 | ```
216 | 
217 | ## Example: Event listeners using a directive
218 | 
219 | You can make use of parametric directives to create a generic directive that
220 | attaches an event listeners to an element.
221 | 
222 | Here we'll use the parameter to store the event name.
223 | 
224 | ```javascript
225 | sb.directive(
226 |   'listen',
227 |   ({ el, value, param }) => {
228 |     el.addEventListener(param, value);
229 |   },
230 |   true
231 | );
232 | ```
233 | 
234 | We can now set this directive on an element:
235 | 
236 | ```html
237 | <button sb-listen="clicHandler:click">Click</button>
238 | 
239 | <script>
240 |   data.clickHandler = () => () => console.log('button clicked');
241 | </script>
242 | ```
243 | 
244 | > **Info**
245 | >
246 | > Here we're using a computed function that returns a function, these aren't
247 | > executed by strawberry and so will be passed to the directive as a value.
248 | >
249 | > Check the computed [documentation](./computed.md#function-can-be-returned-from-computed-functions)
250 | > for more info.
251 | 


--------------------------------------------------------------------------------
/docs/reactivity/mark.md:
--------------------------------------------------------------------------------
  1 | # Mark
  2 | 
  3 | This page is about the details of Strawberry's main directive `sb-mark`. If you
  4 | haven't checked the [Getting Started](../getting_started.md) and the
  5 | [Reactivity](./README.md) pages, I'd suggest doing so first.
  6 | 
  7 | The `sb-mark` directive has three uses:
  8 | 
  9 | 1. [Mark](#updating-an-element-with-sb-mark) an element for its `innerText` to be updated when some data updates.
 10 | 2. [Looping](#looping) an element for items in a array.
 11 | 3. [Deleting](#deleting-values) an element.
 12 | 
 13 | ## Updating an element with `sb-mark`
 14 | 
 15 | The `sb-mark` directive is used to mark any element for update when some data
 16 | changes. For example:
 17 | 
 18 | ```html
 19 | <p sb-mark="message">...</p>
 20 | <script>
 21 |   const data = sb.init();
 22 |   data.message = 'Hello, World!';
 23 | </script>
 24 | ```
 25 | 
 26 | In the above example `sb-mark` is used to mark the `<p>` element to be updated
 27 | when the value of `data.message` updates.
 28 | 
 29 | You can mark elements with nested values using `'.'` separated property names:
 30 | 
 31 | ```html
 32 | <div>
 33 |   <h1 sb-mark="user.name"></h1>
 34 |   <p sb-mark="user.things.0"></p>
 35 | </div>
 36 | 
 37 | <script>
 38 |   data.user = {
 39 |     name: 'Lin', // key: "user.name"
 40 |     things: ['Strawberry'], // key: "user.things.0"
 41 |   };
 42 | </script>
 43 | ```
 44 | 
 45 | ## Looping
 46 | 
 47 | The second use of mark is by using it to mark an element to be looped over for
 48 | each item in an array. This is done by using a special placeholder key, i.e. a
 49 | key that ends in a `".#"`.
 50 | 
 51 | Consider the following example:
 52 | 
 53 | ```html
 54 | <div>
 55 |   <p sb-mark="list.#"></p>
 56 | </div>
 57 | 
 58 | <script>
 59 |   data.list = ['one', 'two'];
 60 | </script>
 61 | ```
 62 | 
 63 | This will render the following HTML:
 64 | 
 65 | ```html
 66 | <div>
 67 |   <p sb-mark="list.0">one</p>
 68 |   <p sb-mark="list.1">two</p>
 69 | </div>
 70 | ```
 71 | 
 72 | > **Warning**
 73 | >
 74 | > Properties before `.#` should always be a JavaScript array.
 75 | 
 76 | ### Updating lists
 77 | 
 78 | Lists can be updated by either updating the value of an item in the array or by
 79 | changing the shape of the array. Strawberry supports both of these operations.
 80 | 
 81 | Updating values of an array item is done by simply reassigning the value of an
 82 | array item:
 83 | 
 84 | ```javascript
 85 | data.list[0] = 'ONE';
 86 | data.list[1] = 'TWO';
 87 | ```
 88 | 
 89 | doing so will update the marked elements to reflect the new values.
 90 | 
 91 | You can alter the shape of the array by using regular array operations to such
 92 | as `push`, `pop`, `splice`, etc.
 93 | 
 94 | ```javascript
 95 | data.push('THREE');
 96 | data.unshift('ZERO');
 97 | ```
 98 | 
 99 | and Strawberry will grow or shrink the list of array elements as required.
100 | 
101 | ### Looping over list of objects
102 | 
103 | You can also loop over lists of objects:
104 | 
105 | ```html
106 | <div sb-mark="users.#">
107 |   <h1 sb-mark="users.#.name"></h1>
108 |   <p sb-mark="users.#.age"></p>
109 | </div>
110 | 
111 | <script>
112 |   data.users = [{ name: 'Lin', age: 33 }];
113 | </script>
114 | ```
115 | 
116 | ### Nested Loops
117 | 
118 | Since each `'#'` in a key denotes a loop you can nest loops like so:
119 | 
120 | ```html
121 | <p sb-mark="matrix.#">
122 |   <span sb-mark="matrix.#.#"></span>
123 | </p>
124 | 
125 | <script>
126 |   data.matrix = [
127 |     [0, 1],
128 |     [2, 3],
129 |   ];
130 | </script>
131 | ```
132 | 
133 | ## Deleting values
134 | 
135 | Deleting values from the reactive object by using the JavaScript `delete`
136 | keyword will cause the marked elements to be removed from the DOM. Resetting the
137 | value will not bring back the element. For example:
138 | 
139 | ```html
140 | <div>
141 |   <p sb-mark="message">...</p>
142 | </div>
143 | 
144 | <script>
145 |   delete data.message;
146 | </script>
147 | ```
148 | 
149 | will result in an empty div:
150 | 
151 | ```html
152 | <div></div>
153 | ```
154 | 
155 | If removing elements from the DOM is not what you intend to happen, you can instead:
156 | 
157 | - Set an empty value eg: `data.message = ''`
158 | - Use CSS, eg setting the `display` property of the element to `none`
159 | 
160 | > **Note**: **Deleting Arrays**
161 | >
162 | > When arrays are deleted the list elements are not deleted. You can instead set
163 | > the list variable to an empty list: `data.list = []`.
164 | >
165 | > Array items on the other hand can be deleted `delete data.list[0]` but this is
166 | > not recommended as it will lead to incorrect sequences of keys, instead use 
167 | > array operations such as `splice`, `pop`, or `shift`.
168 | 


--------------------------------------------------------------------------------
/docs/reactivity/reactive_values.md:
--------------------------------------------------------------------------------
  1 | # Reactive Values
  2 | 
  3 | This page is about values that can be set on the reactive object.
  4 | If you haven't checked the [Getting Started](../getting_started.md)
  5 | and the [Reactivity](./README.md) pages, I'd suggest doing so first.
  6 | 
  7 | **Index**
  8 | 
  9 | 1. [The Reactive Object](#the-reactive-object)
 10 | 2. [Objects and Arrays](#objects-and-arrays)
 11 | 3. [Functions](#functions)
 12 | 4. [Directive keys](#directive-keys)
 13 | 
 14 | ## The Reactive Object
 15 | 
 16 | The value received when `sb.init` is the reactive object.
 17 | 
 18 | ```javascript
 19 | const data = sb.init();
 20 | ```
 21 | 
 22 | Think of this as an object that holds data that is meant to be rendered. You can
 23 | set any kind of value to this object, but Strawberry listens to changes to only
 24 | the following type of objects
 25 | 
 26 | Three kinds of values can be set on reactive objects:
 27 | 
 28 | 1. Primitive values: `strings`, `numbers`, `booleans`, `bigints`, `undefined`, `null`
 29 | 2. Objects: arrays i.e. `[]` and regular objects `{}`.
 30 | 3. Functions
 31 | 
 32 | Out of the above three only the primitive values are directly rendered. If the
 33 | value passed is not a string then it is passed through the `String` function.
 34 | 
 35 | > **Warning**
 36 | >
 37 | > Strawberry might work with other types of values too, but it has not been
 38 | > tested.
 39 | 
 40 | ## Objects and Arrays
 41 | 
 42 | **Objects** are treated as containers of primitive values. They are not directly
 43 | rendered, if you want to render an object you will have to provide its string
 44 | representation instead.
 45 | 
 46 | However deep a primitive value is nested inside an object it can be used to set
 47 | the `innerText` of a marked element.
 48 | 
 49 | ```html
 50 | <p sb-mark="a.b.c"></p>
 51 | <script>
 52 |   data.a = {
 53 |     b: {
 54 |       c: 'Hello, World!',
 55 |     },
 56 |   };
 57 | </script>
 58 | ```
 59 | 
 60 | **Arrays** serve a special purpose, they are used to loop elements, i.e. for
 61 | each item of an array an element can be inserted into the DOM. These are marked
 62 | using special keys that end in `'.#'`.
 63 | 
 64 | ```html
 65 | <div>
 66 |   <p sb-mark="list.#"></p>
 67 | </div>
 68 | <script>
 69 |   data.list = ['a', 'b', 'c'];
 70 | </script>
 71 | ```
 72 | 
 73 | For more details on looping check the page on `sb-mark` and loops [here](./mark.md#loops).
 74 | 
 75 | ## Functions
 76 | 
 77 | **Functions** set on the reactive object are treated as computed values.
 78 | 
 79 | ```html
 80 | <p sb-mark="nameUpper"></p>
 81 | 
 82 | <script>
 83 |   data.name = 'lin';
 84 |   data.nameUpper = () => data.name.toUpperCase();
 85 | 
 86 |   typeof data.nameUpper === 'string'; // evaluates to true
 87 | </script>
 88 | ```
 89 | 
 90 | For more details on this check the page on computed values [here](./computed.md).
 91 | 
 92 | ## Directive keys
 93 | 
 94 | The format used to mark an element is `sb-mark="KEY"`, in the above example the
 95 | value of `KEY` is `message`.
 96 | 
 97 | This `KEY` is used to point to a data value inside the reactive object, for
 98 | nested objects it is a sequence of `'.'` separated property names. For
 99 | example:
100 | 
101 | ```javascript
102 | data.obj = {
103 |   a: {
104 |     b: {
105 |       c: 22, // key: "obj.a.b.c"
106 |       d: [
107 |         { a: 0 }, // key: "obj.a.b.d.0.a"
108 |         { b: 1 }, // key: "obj.a.b.d.1.b"
109 |         {
110 |           c: [
111 |             'x', // key: "obj.a.b.d.2.c.0"
112 |             'y', // key: "obj.a.b.d.2.c.1"
113 |           ],
114 |         },
115 |       ],
116 |     },
117 |   },
118 | };
119 | ```
120 | 


--------------------------------------------------------------------------------
/example/01/README.md:
--------------------------------------------------------------------------------
1 | # single component
2 | 
3 | from https://github.com/18alantom/strawberry/tree/main/docs
4 | 
5 | 


--------------------------------------------------------------------------------
/example/01/index.html:
--------------------------------------------------------------------------------
 1 | <!-- 1. Link Strawberry -->
 2 | <head>
 3 |     <script src="https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"></script>
 4 |   </head>
 5 |   
 6 |   <!-- 2. Define a Component -->
 7 |   <template name="cool-button">
 8 |     <button
 9 |       style="
10 |           padding: 0.5rem 1rem;
11 |           border: 2px solid black;
12 |           border-radius: 0px;
13 |           box-shadow: 4px 4px 0px gray;
14 |         "
15 |     >
16 |       <slot />
17 |     </button>
18 |   </template>
19 |   
20 |   <!-- 3. Initialize Strawberry -->
21 |   <script>
22 |     const data = sb.init();
23 |     data.counter = 0;
24 |   </script>
25 |   
26 |   <!-- 4. Use the Component -->
27 |   <body>
28 |     <cool-button sb-mark="message" onclick="data.counter += 1">
29 |       loading...
30 |     </cool-button>
31 |   </body>
32 |   
33 |   <!-- 5. Update the Component -->
34 |   <script>
35 |     data.message = () => `Clicked ${data.counter} times`;
36 |   </script>


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
   1 | const sbPrefix = Symbol('@sb/prefix');
   2 | 
   3 | type Complex = object | Function;
   4 | type Prefixed<T extends any> = T extends Complex ? T & Meta : never;
   5 | type Meta = { [sbPrefix]: string };
   6 | type Watcher = (newValue: unknown) => unknown;
   7 | type DirectiveParams = {
   8 |   el: Element; // The element to which the directive has been applied.
   9 |   value: unknown; // The updated value.
  10 |   key: string; // Period '.' delimited key that points to the value in the global data object.
  11 |   isDelete: boolean; // Whether the value was deleted `delete data.prop`.
  12 |   parent: Prefixed<object>; // The parent object to which the value belongs (the proxied object, unless isDelete).
  13 |   prop: string; // Property of the parent which points to the value, `parent[prop] ≈ value`
  14 |   param: string | undefined; // If directive is a parametric directive, `param` is passed
  15 | };
  16 | type Directive = (params: DirectiveParams) => void;
  17 | type BasicAttrs = 'mark' | 'if' | 'ifnot';
  18 | type ComputedList = {
  19 |   key: string;
  20 |   computed: Prefixed<Function>;
  21 |   parent: Prefixed<object>;
  22 |   prop: string;
  23 | }[];
  24 | 
  25 | type SyncConfig = {
  26 |   directive: string;
  27 |   el: Element;
  28 |   skipConditionals?: boolean | undefined;
  29 |   skipMark?: boolean | undefined;
  30 | };
  31 | 
  32 | const DONT_CALL = Symbol('@sb/dontcall');
  33 | 
  34 | let globalData: null | Prefixed<{}> = null;
  35 | let globalPrefix = 'sb-';
  36 | const globalWatchers = new Map<string, Watcher[]>();
  37 | const globalDirectives = new Map<
  38 |   string,
  39 |   { cb: Directive; isParametric?: boolean }
  40 | >([
  41 |   [
  42 |     'mark',
  43 |     {
  44 |       cb: ({ el, value, isDelete }) => {
  45 |         if (isDelete) {
  46 |           return remove(el);
  47 |         }
  48 | 
  49 |         if (!(el instanceof HTMLElement)) {
  50 |           return;
  51 |         }
  52 | 
  53 |         if (typeof value === 'object' && value !== null) {
  54 |           value = JSON.stringify(value);
  55 |         }
  56 | 
  57 |         const stringValue = typeof value === 'string' ? value : String(value);
  58 |         el.innerText = stringValue;
  59 |       },
  60 |     },
  61 |   ],
  62 |   ['if', { cb: ({ el, value, key }) => ifOrIfNot(el, value, key, 'if') }],
  63 |   ['ifnot', { cb: ({ el, value, key }) => ifOrIfNot(el, value, key, 'ifnot') }],
  64 | ]);
  65 | 
  66 | /**
  67 |  * Object used to maintain computed values
  68 |  * - `isEvaluating`: set to true when evaluating a computed function
  69 |  * - `set`: used to keep track of dependencies when evaluating a computed function
  70 |  * - `map`: keeps track of dependencies keyed by dependents
  71 |  */
  72 | const globalDeps = {
  73 |   isEvaluating: false,
  74 |   set: new Set<string>(),
  75 |   map: new Map<string, ComputedList>(),
  76 | };
  77 | 
  78 | const attr = (k: BasicAttrs) => globalPrefix + k;
  79 | 
  80 | function reactive<T>(
  81 |   obj: T,
  82 |   prefix: string,
  83 |   parent?: Prefixed<object>,
  84 |   prop?: string
  85 | ): T | Prefixed<T> {
  86 |   if (obj === null) {
  87 |     return obj;
  88 |   }
  89 | 
  90 |   const isObject = typeof obj === 'object';
  91 |   const isFunction = typeof obj === 'function';
  92 |   if (isFunction && parent) {
  93 |     obj = (obj as Function).bind(parent);
  94 |   }
  95 | 
  96 |   if (isObject || isFunction) {
  97 |     Object.defineProperty(obj, sbPrefix, {
  98 |       value: prefix,
  99 |       enumerable: false,
 100 |       writable: true,
 101 |     });
 102 |   }
 103 | 
 104 |   if (isFunction && prop && parent) {
 105 |     setDependents(obj as Prefixed<Function>, prefix, parent, prop);
 106 |     return obj;
 107 |   }
 108 | 
 109 |   if (!isObject) {
 110 |     return obj;
 111 |   }
 112 | 
 113 |   type K = keyof T;
 114 |   const proxied = new Proxy(obj as object, ReactivityHandler) as Prefixed<T>;
 115 |   for (const prop of Object.keys(obj as object)) {
 116 |     const newprefix = getKey(prop, prefix);
 117 |     const value = obj[prop as K];
 118 |     obj[prop as K] = reactive(value, newprefix, proxied, prop);
 119 |   }
 120 | 
 121 |   return proxied;
 122 | }
 123 | 
 124 | class ReactivityHandler implements ProxyHandler<Prefixed<object>> {
 125 |   static get(
 126 |     target: Prefixed<object>,
 127 |     prop: string | symbol,
 128 |     receiver: Prefixed<object>
 129 |   ): unknown {
 130 |     if (
 131 |       globalDeps.isEvaluating &&
 132 |       typeof prop === 'string' &&
 133 |       Object.getOwnPropertyDescriptor(target, prop)?.enumerable
 134 |     ) {
 135 |       globalDeps.set.add(getKey(prop, target[sbPrefix]));
 136 |     }
 137 | 
 138 |     const value = Reflect.get(target, prop, receiver);
 139 |     if (typeof value === 'function' && value[sbPrefix]) {
 140 |       const computed = value();
 141 |       if (computed instanceof Promise) {
 142 |         return computed.then((v) => proxyComputed(v));
 143 |       }
 144 |       return proxyComputed(computed);
 145 |     }
 146 | 
 147 |     return value;
 148 |   }
 149 | 
 150 |   static set(
 151 |     target: Prefixed<object>,
 152 |     prop: string | symbol,
 153 |     value: unknown,
 154 |     receiver: Prefixed<object>
 155 |   ): boolean {
 156 |     if (typeof prop === 'symbol') {
 157 |       return Reflect.set(target, prop, value, receiver);
 158 |     }
 159 | 
 160 |     const key = getKey(prop, target[sbPrefix]);
 161 |     const reactiveValue = reactive(value, key, receiver, prop);
 162 |     const success = Reflect.set(target, prop, reactiveValue, receiver);
 163 |     this.update(reactiveValue, key, false, receiver, prop);
 164 |     this.updateComputed(key);
 165 |     return success;
 166 |   }
 167 | 
 168 |   static deleteProperty(
 169 |     target: Prefixed<object>,
 170 |     prop: string | symbol
 171 |   ): boolean {
 172 |     if (typeof prop === 'symbol') {
 173 |       return Reflect.deleteProperty(target, prop);
 174 |     }
 175 | 
 176 |     const key = getKey(prop, target[sbPrefix]);
 177 |     const success = Reflect.deleteProperty(target, prop);
 178 |     this.update(undefined, key, true, target, prop);
 179 | 
 180 |     globalDeps.map.delete(key);
 181 |     for (const k of globalDeps.map.keys()) {
 182 |       const filtered =
 183 |         globalDeps.map.get(k)?.filter((d) => d.key !== key) ?? [];
 184 |       globalDeps.map.set(k, filtered);
 185 |     }
 186 | 
 187 |     return success;
 188 |   }
 189 | 
 190 |   static defineProperty(
 191 |     target: Prefixed<object>,
 192 |     prop: string | symbol,
 193 |     descriptor: PropertyDescriptor
 194 |   ): boolean {
 195 |     if (
 196 |       prop === sbPrefix &&
 197 |       sbPrefix in target &&
 198 |       /\.\d+$/.test(descriptor.value)
 199 |     ) {
 200 |       return Reflect.set(target, prop, descriptor.value);
 201 |     }
 202 | 
 203 |     return Reflect.defineProperty(target, prop, descriptor);
 204 |   }
 205 | 
 206 |   /**
 207 |    * Called when a computed value's dependent is changed.
 208 |    *
 209 |    * @param key period '.' separated key to the computed value's dep, used to track the computed value
 210 |    */
 211 |   static updateComputed(key: string) {
 212 |     const dependentNames = [...globalDeps.map.keys()]
 213 |       .filter(
 214 |         (k) => k === key || k.startsWith(key + '.') || key.startsWith(k + '.')
 215 |       )
 216 |       .flatMap((k) => globalDeps.map.get(k) ?? []);
 217 | 
 218 |     const executed = new Set<Function>();
 219 |     for (const dep of dependentNames) {
 220 |       if (executed.has(dep.computed)) {
 221 |         continue;
 222 |       }
 223 | 
 224 |       this.update(dep.computed, dep.key, false, dep.parent, dep.prop);
 225 |       executed.add(dep.computed);
 226 |     }
 227 |   }
 228 | 
 229 |   /**
 230 |    * `update` calls the watchers and directive functions with the value so that changes
 231 |    * to the object can be propagated
 232 |    *
 233 |    * @param value new value that is set, if deleted then `undefined`
 234 |    * @param key period '.' joined key that points to the value in the global reactive object
 235 |    * @param isDelete whether the value is being deleted (only if being called from deleteProperty)
 236 |    * @param parent object to which `value` belongs (actual object, not the proxy)
 237 |    * @param prop property of the parent which points to the value, `parent[prop] ≈ value`
 238 |    * @param syncConfig object used to sync a single node on insertion from if | ifnot
 239 |    */
 240 |   static update(
 241 |     value: unknown,
 242 |     key: string,
 243 |     isDelete: boolean,
 244 |     parent: Prefixed<object>,
 245 |     prop: string,
 246 |     syncConfig?: SyncConfig
 247 |   ) {
 248 |     if (typeof value === 'function' && !value.hasOwnProperty(DONT_CALL)) {
 249 |       value = runComputed(value, key, parent, prop);
 250 |     }
 251 | 
 252 |     if (value instanceof Promise) {
 253 |       (value as Promise<unknown>).then((v: unknown) =>
 254 |         this.update(v, key, false, parent, prop, syncConfig)
 255 |       );
 256 |       return;
 257 |     }
 258 | 
 259 |     if (!syncConfig) {
 260 |       this.callWatchers(value, key);
 261 |     }
 262 |     this.callDirectives(
 263 |       value,
 264 |       key,
 265 |       isDelete,
 266 |       parent,
 267 |       prop,
 268 |       undefined,
 269 |       undefined,
 270 |       syncConfig
 271 |     );
 272 |   }
 273 | 
 274 |   static callWatchers(value: unknown, key: string) {
 275 |     for (const k of globalWatchers.keys()) {
 276 |       if (key === k) {
 277 |         globalWatchers.get(k)?.forEach((cb) => cb(value));
 278 |       } else if (key.startsWith(k + '.') && globalData !== null) {
 279 |         const { value } = getValue(k);
 280 |         globalWatchers.get(k)?.forEach((cb) => cb(value));
 281 |       }
 282 |     }
 283 |   }
 284 | 
 285 |   static callDirectives(
 286 |     value: unknown,
 287 |     key: string,
 288 |     isDelete: boolean,
 289 |     parent: Prefixed<object>,
 290 |     prop: string,
 291 |     searchRoot?: Element | Document,
 292 |     skipUpdateArrayElements?: boolean,
 293 |     syncConfig?: SyncConfig
 294 |   ): void {
 295 |     const isParentArray = Array.isArray(parent);
 296 |     if (
 297 |       isParentArray &&
 298 |       /^\d+$/.test(prop) &&
 299 |       !skipUpdateArrayElements &&
 300 |       syncConfig?.skipMark !== true
 301 |     ) {
 302 |       updateArrayItemElement(key, prop, value, parent);
 303 |     } else if (isParentArray && prop === 'length') {
 304 |       sortArrayItemElements(parent);
 305 |     }
 306 | 
 307 |     const isRDO = isPrefixedObject(value);
 308 |     if (isRDO && Array.isArray(value) && syncConfig?.skipMark !== true) {
 309 |       const placeholderKey = `${key}.#`;
 310 |       const rootQuery = `[${attr('mark')}="${placeholderKey}"]`;
 311 |       const elsArray: Element[][] = [];
 312 | 
 313 |       /**
 314 |        * if skipMark is not true and el is present
 315 |        * the node being synced has not yet been inserted
 316 |        * into the DOM, i.e. isConnected=false hence
 317 |        * query selector must run on the parent.
 318 |        */
 319 |       let target: Document | Element = document;
 320 |       if (syncConfig?.el.parentElement) {
 321 |         target = syncConfig.el.parentElement;
 322 |       }
 323 | 
 324 |       for (const plc of target.querySelectorAll(rootQuery)) {
 325 |         const els = initializeArrayElements(plc, placeholderKey, value);
 326 |         elsArray.push(els);
 327 |       }
 328 | 
 329 |       /**
 330 |        * Set values to the newly initialized elements
 331 |        */
 332 |       for (const els of elsArray) {
 333 |         for (const i in value) {
 334 |           this.callDirectives(
 335 |             value[i],
 336 |             getKey(i, key),
 337 |             isDelete,
 338 |             value,
 339 |             i,
 340 |             els[i],
 341 |             true
 342 |           );
 343 |         }
 344 |       }
 345 |     } else if (isRDO) {
 346 |       for (const k in value) {
 347 |         this.callDirectives(
 348 |           value[k as unknown as keyof typeof value],
 349 |           getKey(k, key),
 350 |           isDelete,
 351 |           value,
 352 |           k,
 353 |           searchRoot
 354 |         );
 355 |       }
 356 |     }
 357 | 
 358 |     if (isRDO) {
 359 |       return;
 360 |     }
 361 | 
 362 |     if (syncConfig) {
 363 |       const { el, directive: attrSuffix } = syncConfig;
 364 |       const { cb, isParametric } = globalDirectives.get(attrSuffix) ?? {};
 365 |       const param = getParam(el, globalPrefix + attrSuffix, !!isParametric);
 366 |       cb?.({ el: el, value, key, isDelete, parent, prop, param });
 367 |       return;
 368 |     }
 369 | 
 370 |     searchRoot ??= document;
 371 |     for (const [attrSuffix, directive] of globalDirectives.entries()) {
 372 |       const { cb, isParametric } = directive;
 373 |       const attrName = globalPrefix + attrSuffix;
 374 |       let query: string;
 375 |       if (isParametric) {
 376 |         query = `[${attrName}^='${key}:']`;
 377 |       } else {
 378 |         query = `[${attrName}='${key}']`;
 379 |       }
 380 | 
 381 |       searchRoot.querySelectorAll(query).forEach((el) => {
 382 |         const param = getParam(el, attrName, !!isParametric);
 383 |         cb({ el, value, key, isDelete, parent, prop, param });
 384 |       });
 385 | 
 386 |       if (
 387 |         searchRoot instanceof Element &&
 388 |         searchRoot.getAttribute(attrName) === key
 389 |       ) {
 390 |         const param = getParam(searchRoot, attrName, !!isParametric);
 391 |         cb({ el: searchRoot, value, key, isDelete, parent, prop, param });
 392 |       }
 393 |     }
 394 |   }
 395 | }
 396 | 
 397 | function ifOrIfNot(
 398 |   el: Element,
 399 |   value: unknown,
 400 |   key: string,
 401 |   type: 'if' | 'ifnot'
 402 | ) {
 403 |   const isShow = type === 'if' ? !!value : !value;
 404 |   const isTemplate = el instanceof HTMLTemplateElement;
 405 | 
 406 |   if (isShow && isTemplate) {
 407 |     const child = el.content.firstElementChild;
 408 |     if (!child) {
 409 |       return;
 410 |     }
 411 | 
 412 |     child.setAttribute(attr(type), key);
 413 |     syncNode(child, true);
 414 |     el.replaceWith(child);
 415 |   }
 416 | 
 417 |   if (!isShow && !isTemplate) {
 418 |     const temp = document.createElement('template');
 419 |     temp.content.appendChild(el.cloneNode(true));
 420 |     temp.setAttribute(attr(type), key);
 421 |     const mark = el.getAttribute(attr('mark'));
 422 |     if (mark) {
 423 |       temp.setAttribute(attr('mark'), mark);
 424 |     }
 425 |     el.replaceWith(temp);
 426 |   }
 427 | }
 428 | 
 429 | /**
 430 |  * Called from conditionals when it evaluates to true and an elemen
 431 |  * is inserted into the DOM. Function calls `update` with `syncConfig`
 432 |  * to trigger only the directives found on the node being synced.
 433 |  * @param el Element to be synced
 434 |  * @param isSyncRoot Whether `el` is the root node from where the sync begins
 435 |  */
 436 | function syncNode(el: Element, isSyncRoot: boolean) {
 437 |   for (const ch of el.children) {
 438 |     syncNode(ch, false);
 439 |   }
 440 | 
 441 |   syncDirectives(el, isSyncRoot);
 442 | }
 443 | 
 444 | function syncClone(clone: Element) {
 445 |   for (const ch of clone.children) {
 446 |     syncClone(ch);
 447 |   }
 448 | 
 449 |   syncDirectives(clone, false, true);
 450 | }
 451 | 
 452 | function syncDirectives(
 453 |   el: Element,
 454 |   skipConditionals?: boolean,
 455 |   skipMark?: boolean
 456 | ) {
 457 |   for (const [name, { isParametric }] of globalDirectives.entries()) {
 458 |     if (
 459 |       (skipMark && name === 'mark') ||
 460 |       (skipConditionals && (name === 'if' || name === 'ifnot'))
 461 |     ) {
 462 |       continue;
 463 |     }
 464 | 
 465 |     let key = el.getAttribute(globalPrefix + name);
 466 |     if (isParametric) {
 467 |       key = key?.split(':')[0] ?? null;
 468 |     }
 469 | 
 470 |     if (key?.endsWith('.#')) {
 471 |       key = key.slice(0, -2);
 472 |     }
 473 | 
 474 |     if (key === null) {
 475 |       continue;
 476 |     }
 477 | 
 478 |     const { value, parent, prop } = getValue(key);
 479 |     if (!parent) {
 480 |       continue;
 481 |     }
 482 | 
 483 |     ReactivityHandler.update(value, key, false, parent, prop, {
 484 |       directive: name,
 485 |       el,
 486 |       skipConditionals,
 487 |       skipMark,
 488 |     });
 489 |   }
 490 | }
 491 | 
 492 | /**
 493 |  * Stores the list of dependencies the computed value is dependent on.
 494 |  *
 495 |  * @param value function for the computed value
 496 |  * @param key period '.' joined key that points to the value in the global reactive object
 497 |  * @param parent object to which `value` belongs (not the proxy of the object). undefined if dependency
 498 |  * @param prop property of the parent which points to the value, parent[prop] ≈ value. undefined if dependency
 499 |  */
 500 | function setDependents(
 501 |   value: Prefixed<Function>,
 502 |   key: string,
 503 |   parent: Prefixed<object>,
 504 |   prop: string
 505 | ) {
 506 |   /**
 507 |    * Capture dependencies in `globalDeps.set`. The set is updated
 508 |    * in the `get` trap of the proxy.
 509 |    */
 510 |   globalDeps.isEvaluating = true;
 511 |   globalDeps.set.clear();
 512 |   value();
 513 |   globalDeps.isEvaluating = false;
 514 | 
 515 |   const dependent = {
 516 |     key,
 517 |     computed: value,
 518 |     parent,
 519 |     prop,
 520 |   };
 521 | 
 522 |   for (const dep of globalDeps.set) {
 523 |     const computedList = globalDeps.map.get(dep) ?? [];
 524 |     computedList.push(dependent);
 525 |     if (!globalDeps.map.has(dep)) {
 526 |       globalDeps.map.set(dep, computedList);
 527 |     }
 528 |   }
 529 | }
 530 | 
 531 | /**
 532 |  * @param key prefixed key (eg: "list.3")
 533 |  * @param idx index of the newly pushed element (eg: "3")
 534 |  * @param item array[idx] to prevent repeat get
 535 |  * @param array array into which the value is pushed
 536 |  */
 537 | function updateArrayItemElement(
 538 |   key: string,
 539 |   idx: string,
 540 |   item: unknown,
 541 |   array: Prefixed<unknown[]>
 542 | ) {
 543 |   /**
 544 |    * Called only when an array element is updated,
 545 |    * i.e. prop is a digit, such as when push, splice, etc are called.
 546 |    *
 547 |    * When an item is pushed to an Array, the DOM element that maps to that
 548 |    * item does not exist.
 549 |    *
 550 |    * This function inserts the child element before the template.
 551 |    */
 552 |   const arrayItems = document.querySelectorAll(`[${attr('mark')}="${key}"]`);
 553 |   if (arrayItems.length && !isPrefixedObject(item)) {
 554 |     /**
 555 |      * For primitive items just updating the innerText
 556 |      * suffices, no need to replace the element.
 557 |      */
 558 |     return;
 559 |   }
 560 | 
 561 |   const prefix = array[sbPrefix];
 562 |   const placeholderKey = key.replace(/\d+$/, '#');
 563 |   let itemReplaced: boolean = false;
 564 | 
 565 |   /**
 566 |    * Loop runs if the array item already exists, so if a value is
 567 |    * "pushed" into an array, this won't update the element array
 568 |    * because the array item doesn't already exist.
 569 |    */
 570 |   for (const item of arrayItems) {
 571 |     let placeholder = item.nextElementSibling;
 572 |     while (placeholder) {
 573 |       if (placeholder.getAttribute(attr('mark')) === placeholderKey) {
 574 |         break;
 575 |       }
 576 |       placeholder = placeholder.nextElementSibling;
 577 |     }
 578 | 
 579 |     let clone: Node | null | undefined;
 580 |     if (placeholder instanceof HTMLTemplateElement) {
 581 |       clone = placeholder.content.firstElementChild?.cloneNode(true);
 582 |     } else if (placeholder?.getAttribute(attr('mark')) === placeholderKey) {
 583 |       /**
 584 |        * possible no-op: unconcealed placeholder should not exist
 585 |        * if the array had elements when the outer function was called
 586 |        */
 587 |       clone = placeholder?.cloneNode(true);
 588 |     } else {
 589 |       continue;
 590 |     }
 591 | 
 592 |     if (!(clone instanceof Element)) {
 593 |       continue;
 594 |     }
 595 | 
 596 |     initializeClone(idx, prefix, placeholderKey, clone);
 597 |     item.replaceWith(clone);
 598 |     syncClone(clone);
 599 |     itemReplaced ||= true;
 600 |   }
 601 | 
 602 |   if (itemReplaced) {
 603 |     return;
 604 |   }
 605 | 
 606 |   const templates = document.querySelectorAll(
 607 |     `[${attr('mark')}="${placeholderKey}"]`
 608 |   );
 609 | 
 610 |   for (const template of templates) {
 611 |     if (!(template instanceof HTMLTemplateElement)) {
 612 |       continue;
 613 |     }
 614 | 
 615 |     const clone = template.content.firstElementChild?.cloneNode(true);
 616 |     if (!(clone instanceof Element)) {
 617 |       continue;
 618 |     }
 619 | 
 620 |     initializeClone(idx, prefix, placeholderKey, clone);
 621 |     template.before(clone);
 622 |     syncClone(clone);
 623 |   }
 624 | }
 625 | 
 626 | function sortArrayItemElements(array: Prefixed<unknown[]>): void {
 627 |   /**
 628 |    * Called only when length prop of an array is set.
 629 |    *
 630 |    * Length is the last property to be set after an array shape
 631 |    * has been altered by using methods such as push, splice, etc.
 632 |    *
 633 |    * This sorts the DOM nodes to match the data array since updates
 634 |    * (get, set sequence) don't always happen in the right order such as
 635 |    * when using splice. So sorting must take place after the update.
 636 |    */
 637 |   const templateKey = getKey('#', array[sbPrefix]);
 638 |   const templates = document.querySelectorAll(
 639 |     `[${attr('mark')}="${templateKey}"]`
 640 |   );
 641 | 
 642 |   for (const template of templates) {
 643 |     const items: Element[] = [];
 644 | 
 645 |     /**
 646 |      * populate the items array with item elements
 647 |      * items array is populated in the reverse order
 648 |      */
 649 |     let prev = template.previousElementSibling;
 650 |     let isSorted = true;
 651 |     let lastIdx: number = -1;
 652 |     while (prev) {
 653 |       const curr = prev;
 654 |       prev = curr.previousElementSibling;
 655 | 
 656 |       const key = curr?.getAttribute(attr('mark'));
 657 |       if (!key) {
 658 |         continue;
 659 |       }
 660 | 
 661 |       if (key === templateKey) {
 662 |         break;
 663 |       }
 664 | 
 665 |       if (key.replace(/\d+$/, '#') === templateKey) {
 666 |         items.push(curr);
 667 |         if (!isSorted) {
 668 |           continue;
 669 |         }
 670 | 
 671 |         const idx = Number(key.slice(key.lastIndexOf('.') + 1) ?? -1);
 672 |         if (lastIdx !== -1 && lastIdx !== idx + 1) {
 673 |           isSorted = false;
 674 |         }
 675 |         lastIdx = idx;
 676 |       }
 677 |     }
 678 | 
 679 |     if (isSorted) {
 680 |       return;
 681 |     }
 682 | 
 683 |     /**
 684 |      * reverse the unsorted array to get it in the same order
 685 |      * as the DOM, and create a sortedArray.
 686 |      */
 687 |     const sortedItems = [...items].sort((a, b) => {
 688 |       const am = a.getAttribute(attr('mark'));
 689 |       const bm = b.getAttribute(attr('mark'));
 690 |       if (!am || !bm) {
 691 |         return 0;
 692 |       }
 693 | 
 694 |       const ams = am.split('.');
 695 |       const bms = bm.split('.');
 696 | 
 697 |       const amIdx = +(ams[ams.length - 1] ?? 0);
 698 |       const bmIdx = +(bms[bms.length - 1] ?? 0);
 699 | 
 700 |       return amIdx - bmIdx;
 701 |     });
 702 | 
 703 |     /**
 704 |      * Replace the unsorted items by the sorted items.
 705 |      */
 706 |     sortedItems.forEach((item) => template.before(item));
 707 |   }
 708 | }
 709 | 
 710 | function initializeArrayElements(
 711 |   plc: Element,
 712 |   placeholderKey: string,
 713 |   array: unknown[]
 714 | ): Element[] {
 715 |   /**
 716 |    * 1. Delete Previous Array Elements
 717 |    *
 718 |    * When a new list is set previous list item elements should be
 719 |    * deleted. Empty list deletes all items, but keeps the placeholder.
 720 |    *
 721 |    * When a array is updated a child element is prepended before the
 722 |    * placeholder element.
 723 |    */
 724 |   let prev = plc.previousElementSibling;
 725 |   while (prev) {
 726 |     const curr = prev;
 727 |     prev = curr.previousElementSibling;
 728 | 
 729 |     const key = curr?.getAttribute(attr('mark'));
 730 |     if (!key) {
 731 |       continue;
 732 |     }
 733 | 
 734 |     if (key !== placeholderKey && key.replace(/\d+$/, '#') === placeholderKey) {
 735 |       curr?.remove();
 736 |     } else {
 737 |       break;
 738 |     }
 739 |   }
 740 | 
 741 |   /**
 742 |    * 2. Get Placeholder and Template from `plc`
 743 |    *
 744 |    * `plc` can be either a concealed element,
 745 |    * i.e. the `template`:
 746 |    * ```html
 747 |    * <template sb-mark="list.#">
 748 |    *   <!-- ONLY one child -->
 749 |    *   <li></li>
 750 |    * </template>
 751 |    * ```
 752 |    * Or a rendered element, i.e. the `placeholder`:
 753 |    * ```html
 754 |    * <li sb-mark="list.#">zero</li>
 755 |    * ```
 756 |    *
 757 |    * `template` is maintained at the end of a list
 758 |    * of elements and contains the `placeholder`.
 759 |    *
 760 |    * `placeholder` is cloned to create list elements.
 761 |    */
 762 |   let template: HTMLTemplateElement;
 763 |   let placeholder: Element | null;
 764 |   if (plc instanceof HTMLTemplateElement) {
 765 |     template = plc;
 766 |     placeholder = plc.content.firstElementChild;
 767 |     placeholder?.setAttribute(attr('mark'), placeholderKey);
 768 |   } else {
 769 |     placeholder = plc;
 770 |     template = document.createElement('template');
 771 |     template.content.appendChild(plc.cloneNode(true));
 772 |     template.setAttribute(attr('mark'), placeholderKey);
 773 |     plc.replaceWith(template);
 774 |   }
 775 | 
 776 |   if (placeholder === null) {
 777 |     console.warn(`empty template found for ${placeholderKey}`);
 778 |     return [];
 779 |   }
 780 | 
 781 |   /**
 782 |    * For each array item, insert a child element before the
 783 |    * template
 784 |    */
 785 |   const prefix = placeholderKey.slice(0, -2); // remove '.#' loop indicator
 786 |   const arrayElements: Element[] = [];
 787 |   for (const idx in array) {
 788 |     if (Number.isNaN(+idx)) {
 789 |       continue;
 790 |     }
 791 | 
 792 |     const clone = placeholder.cloneNode(true);
 793 |     if (!(clone instanceof Element)) {
 794 |       continue;
 795 |     }
 796 | 
 797 |     initializeClone(idx, prefix, placeholderKey, clone);
 798 |     template.before(clone);
 799 |     syncClone(clone);
 800 |     arrayElements.push(clone);
 801 |   }
 802 | 
 803 |   return arrayElements;
 804 | }
 805 | 
 806 | /**
 807 |  * @param idx index of `item` in `array` eg: "0"
 808 |  * @param prefix item element key prefix i.e. placholder key without ".#"
 809 |  * @param placeholderKey key set on the placeholder element eg: "list.#"
 810 |  * @param clone clone of the placeholder item
 811 |  */
 812 | function initializeClone(
 813 |   idx: string,
 814 |   prefix: string,
 815 |   placeholderKey: string,
 816 |   clone: Element
 817 | ): void {
 818 |   const key = getKey(idx, prefix);
 819 | 
 820 |   /**
 821 |    * Change directive keys from placeholder keys
 822 |    * eg `"users.#.name"` to actual keys eg `"users.0.name"`
 823 |    */
 824 |   for (const attrSuffix of globalDirectives.keys()) {
 825 |     const attrName = globalPrefix + attrSuffix;
 826 |     /**
 827 |      * Change clone's directive keys
 828 |      */
 829 |     setKey(clone, attrName, key, placeholderKey);
 830 | 
 831 |     /**
 832 |      * Change clone's children's directive keys
 833 |      */
 834 |     clone.querySelectorAll(`[${attrName}]`).forEach((ch) => {
 835 |       setKey(ch, attrName, key, placeholderKey);
 836 |     });
 837 |   }
 838 | }
 839 | 
 840 | function setKey(
 841 |   el: Element,
 842 |   attrName: string,
 843 |   key: string,
 844 |   placeholderKey: string
 845 | ) {
 846 |   const pkey = el.getAttribute(attrName);
 847 |   if (pkey?.startsWith(placeholderKey)) {
 848 |     const newPkey = key + pkey.slice(placeholderKey.length);
 849 |     el.setAttribute(attrName, newPkey);
 850 |   }
 851 | }
 852 | 
 853 | function remove(el: Element) {
 854 |   const parent = el.parentElement;
 855 | 
 856 |   if (!(el instanceof HTMLElement) || !parent) {
 857 |     return el.remove();
 858 |   }
 859 | 
 860 |   if (el.getAttribute(attr('mark')) === parent.getAttribute(attr('mark'))) {
 861 |     return parent.remove();
 862 |   }
 863 | 
 864 |   el.remove();
 865 | }
 866 | 
 867 | function isPrefixedObject(value: unknown): value is Prefixed<object> {
 868 |   if (typeof value !== 'object' || value === null) {
 869 |     return false;
 870 |   }
 871 | 
 872 |   return sbPrefix in value;
 873 | }
 874 | 
 875 | function getKey(prop: string, prefix: string) {
 876 |   return prefix === '' ? prop : prefix + '.' + prop;
 877 | }
 878 | 
 879 | function getParam(el: Element, attrName: string, isParametric: boolean) {
 880 |   let value;
 881 |   if (!isParametric || !(value = el.getAttribute(attrName))) {
 882 |     return undefined;
 883 |   }
 884 | 
 885 |   return value.slice(value.indexOf(':') + 1);
 886 | }
 887 | 
 888 | /**
 889 |  * Function gets a value from the `globalData` object when passed a '.' separated
 890 |  * key. Also returns the `parent` object containing the `value` and the `prop` of
 891 |  * the value in the parent object.
 892 |  *
 893 |  * @param key period '.' separated key to a value in the reactive `globalData`
 894 |  */
 895 | function getValue(key: string) {
 896 |   let parent = globalData;
 897 |   let value: unknown = undefined;
 898 |   let prop: string = '';
 899 | 
 900 |   if (parent === null) {
 901 |     return { parent, value, prop };
 902 |   }
 903 | 
 904 |   const parts = key.split('.').reverse();
 905 |   while (parts.length) {
 906 |     prop = parts.pop() ?? '';
 907 |     value = Reflect.get(parent, prop);
 908 |     if (!parts.length || typeof value !== 'object' || value === null) {
 909 |       break;
 910 |     } else {
 911 |       parent = value as Prefixed<object>;
 912 |     }
 913 |   }
 914 | 
 915 |   return { parent, value, prop };
 916 | }
 917 | 
 918 | function runComputed(
 919 |   computed: Function,
 920 |   key: string,
 921 |   parent: Prefixed<object>,
 922 |   prop: string
 923 | ) {
 924 |   const value = computed();
 925 |   if (value instanceof Promise) {
 926 |     return value.then((v) => proxyComputed(v, key, parent, prop));
 927 |   }
 928 | 
 929 |   return proxyComputed(value, key, parent, prop);
 930 | }
 931 | 
 932 | function proxyComputed(
 933 |   value: any,
 934 |   key?: string,
 935 |   parent?: Prefixed<object>,
 936 |   prop?: string
 937 | ) {
 938 |   if (typeof value === 'function') {
 939 |     value[DONT_CALL] = true;
 940 |     return value;
 941 |   }
 942 | 
 943 |   if (key === undefined || parent === undefined || prop === undefined) {
 944 |     return clone(value);
 945 |   }
 946 | 
 947 |   return reactive(clone(value), key, parent, prop);
 948 | }
 949 | 
 950 | function clone<T>(target: T): T {
 951 |   if (typeof target !== 'object' || target === null) {
 952 |     return target;
 953 |   }
 954 | 
 955 |   const cl = Array.isArray(target) ? [] : {};
 956 |   for (const key in target) {
 957 |     // @ts-ignore
 958 |     cl[key] = clone(target[key]);
 959 |   }
 960 | 
 961 |   return cl as T;
 962 | }
 963 | 
 964 | /**
 965 |  * External API Code
 966 |  */
 967 | 
 968 | /**
 969 |  * Used to override the global prefix value.
 970 |  * @param value string value for the prefix eg: 'data-sb'
 971 |  */
 972 | export function prefix(value: string = 'sb'): void {
 973 |   if (!value.endsWith('-')) {
 974 |     value = value + '-';
 975 |   }
 976 |   globalPrefix = value;
 977 | }
 978 | 
 979 | /**
 980 |  * Used to register a directive.
 981 |  * @param name name of the directive
 982 |  * @param cb the directive callback
 983 |  * @param isParametric whether the directive is a parametric directive
 984 |  */
 985 | export function directive(
 986 |   name: string,
 987 |   cb: Directive,
 988 |   isParametric: boolean = false
 989 | ): void {
 990 |   if (!globalDirectives.has(name)) {
 991 |     globalDirectives.set(name, { cb, isParametric });
 992 |   }
 993 | }
 994 | 
 995 | /**
 996 |  * Initializes strawberry and returns the reactive object.
 997 |  */
 998 | export function init(): Meta {
 999 |   globalData ??= reactive({}, '') as {} & Meta;
1000 | 
1001 |   registerTemplates();
1002 |   document.addEventListener('readystatechange', readyStateChangeHandler);
1003 | 
1004 |   return globalData;
1005 | }
1006 | 
1007 | function readyStateChangeHandler() {
1008 |   if (document.readyState === 'interactive') {
1009 |     registerTemplates();
1010 |   }
1011 | }
1012 | 
1013 | /**
1014 |  * Loads templates from external files. Relative paths
1015 |  * should be provided for loading.
1016 |  */
1017 | export async function load(files: string | string[]): Promise<void> {
1018 |   if (typeof files === 'string') {
1019 |     files = [files];
1020 |   }
1021 | 
1022 |   for (const file of files) {
1023 |     const html = await fetch(file)
1024 |       .then((r) => r.text())
1025 |       .catch((e) => console.error(e));
1026 |     if (typeof html !== 'string') {
1027 |       continue;
1028 |     }
1029 | 
1030 |     register(html);
1031 |   }
1032 | }
1033 | 
1034 | /**
1035 |  * Registers templates. It can be used to register custom components during
1036 |  * runtime, i.e. after DOM has loaded. Else `sb.init` and `sb.load` should be
1037 |  * sufficient.
1038 |  *
1039 |  * `sb.load` calls this to register templates after fetching them. It can be used
1040 |  * in few different ways.
1041 |  *
1042 |  * 1. Without any passing args.
1043 |  *    ```javascript
1044 |  *       sb.register();
1045 |  *    ```
1046 |  *    This will register all the elements in html document if they haven't been registered
1047 |  *
1048 |  * 2. Passing the root element that contains the templates
1049 |  *    ```javascript
1050 |  *       sb.register(rootElement);
1051 |  *    ````
1052 |  *    This will register all the templates found inside the root element.
1053 |  *
1054 |  * 3. Using it as a tag function:
1055 |  *    ```javascript
1056 |  *       sb.register`
1057 |  *         <template name="colored-p">
1058 |  *           <p style="font-family: sans-serif; color: ${color};">
1059 |  *             <slot />
1060 |  *           </p>
1061 |  *         </template>`;
1062 |  *    ```
1063 |  *    This allows for dynamically creating templates with interpolated
1064 |  *    values and expressions.
1065 |  *
1066 |  * 4. Passing it the template as a string. Functionally, it is the same
1067 |  *    as using it as a tagged function
1068 |  *    ```javascript
1069 |  *       sb.register(`<template name="colored-p">
1070 |  *           <p style="font-family: sans-serif; color: ${color};">
1071 |  *             <slot />
1072 |  *           </p>
1073 |  *         </template>`);
1074 |  *    ```
1075 |  */
1076 | export function register(root: string[], ...args: unknown[]): void;
1077 | export function register(root: HTMLElement): void;
1078 | export function register(template: string): void;
1079 | export function register(
1080 |   root?: string | HTMLElement | string[],
1081 |   ...args: unknown[]
1082 | ): void {
1083 |   if (Array.isArray(root)) {
1084 |     root = stitchTemplate(root, ...args);
1085 |   }
1086 | 
1087 |   if (typeof root === 'string') {
1088 |     root = wrapInDiv(root);
1089 |   }
1090 | 
1091 |   registerTemplates(root);
1092 | }
1093 | 
1094 | function registerTemplates(rootElement?: HTMLElement) {
1095 |   let root = rootElement ?? document;
1096 |   for (const template of root.getElementsByTagName('template')) {
1097 |     registerComponent(template);
1098 |   }
1099 | }
1100 | 
1101 | function stitchTemplate(arr: string[], ...args: unknown[]): string {
1102 |   let stitched: string = arr[0] ?? '';
1103 |   for (let i = 1; i < arr.length; i++) {
1104 |     stitched += args[i - 1];
1105 |     stitched += arr[i];
1106 |   }
1107 |   return stitched;
1108 | }
1109 | 
1110 | function wrapInDiv(html: string): HTMLElement {
1111 |   const root = document.createElement('div');
1112 |   root.innerHTML = html;
1113 |   return root;
1114 | }
1115 | 
1116 | function registerComponent(template: HTMLTemplateElement) {
1117 |   const name = template.getAttribute('name')?.toLowerCase();
1118 |   if (!name || !!customElements.get(name)) {
1119 |     return;
1120 |   }
1121 | 
1122 |   const constructor = class extends HTMLElement {
1123 |     constructor() {
1124 |       super();
1125 |       const shadowRoot = this.attachShadow({ mode: 'open' });
1126 |       for (const style of document.getElementsByTagName('style')) {
1127 |         shadowRoot.appendChild(style.cloneNode(true));
1128 |       }
1129 | 
1130 |       for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
1131 |         shadowRoot.appendChild(link.cloneNode(true));
1132 |       }
1133 | 
1134 |       for (const ch of template.content.childNodes) {
1135 |         if (!ch) {
1136 |           continue;
1137 |         }
1138 | 
1139 |         shadowRoot.appendChild(ch.cloneNode(true));
1140 |       }
1141 |     }
1142 |   };
1143 | 
1144 |   customElements.define(name, constructor);
1145 | }
1146 | 
1147 | /**
1148 |  * Sets watchers for a given key. Key is a dot separated string
1149 |  * for a value in side the reactive object.
1150 |  *
1151 |  * For example:
1152 |  *
1153 |  * ```javascript
1154 |  * data = {
1155 |  *   a: {
1156 |  *     b: [
1157 |  *       'value',
1158 |  *     ]
1159 |  *   }
1160 |  * }
1161 |  * ```
1162 |  *
1163 |  * For example to the key to watch changes to the string 'value'
1164 |  * would be `a.b.0`.
1165 |  *
1166 |  * Watcher is a function that receives the newValue that is set.
1167 |  * watchers should not alter the reactive object. If a dependent
1168 |  * value is required then a `computed` value should be used.
1169 |  */
1170 | export function watch(key: string, watcher: Watcher): void {
1171 |   const watchers = globalWatchers.get(key) ?? [];
1172 |   watchers.push(watcher);
1173 |   if (!globalWatchers.has(key)) {
1174 |     globalWatchers.set(key, watchers);
1175 |   }
1176 | }
1177 | 
1178 | export function unwatch(key?: string, watcher?: Watcher): void {
1179 |   if (!key && !watcher) {
1180 |     globalWatchers.clear();
1181 |     return;
1182 |   }
1183 | 
1184 |   if (!watcher && key) {
1185 |     globalWatchers.delete(key);
1186 |     return;
1187 |   }
1188 | 
1189 |   let watcherList:
1190 |     | [string, Watcher[]][]
1191 |     | ReturnType<(typeof globalWatchers)['entries']>;
1192 |   if (key) {
1193 |     watcherList = [[key, globalWatchers.get(key) ?? []]];
1194 |   } else {
1195 |     watcherList = globalWatchers.entries();
1196 |   }
1197 | 
1198 |   for (const [key, watchers] of watcherList) {
1199 |     const filtered = watchers.filter((w) => w !== watcher);
1200 |     globalWatchers.set(key, filtered);
1201 |   }
1202 | }
1203 | 
1204 | /**
1205 | 
1206 | # Scratch Space
1207 | 
1208 | TODO:
1209 | - [ ] Remove need to apply names on slot elements (if slot names are mark names).
1210 | - [ ] Review the code, take note of implementation and hacks
1211 | - [ ] DOM Thrashing?
1212 | - [ ] Performance
1213 |   - [ ] Cache computed
1214 |   - [^] Cache el references? (might not be required, 10ms for 1_000_000 divs querySelectorAll)
1215 | 
1216 | 
1217 | 
1218 | # Notes
1219 | 
1220 | TODO: Move these elsewhere maybe
1221 | 
1222 | ## Tech Debt: Set Trap UI Update Logic
1223 | 
1224 | Right now the code for set is a bit convoluted. It was written after a
1225 | single pass over the problem statement, while plugging unwanted behaviour
1226 | with some bandaid code.
1227 | 
1228 | Updations on set have a few complexities:
1229 | 1. Value set can be an array: the elements of the array need to be inserted
1230 |   after being cloned from the placeholder.
1231 | 2. Value set can be an item (in an array): the marked element corresponding to
1232 |   the item might not exist in the DOM, in this case the element needs to be
1233 |   inserted after being cloned from the placeholder and then the DOM elements
1234 |   need to be sorted because the item could have been inserted by use of splice.
1235 | 3. Value set is an if[not]==true element: the element needs to be removed from
1236 |   the container template and inserted into the DOM.
1237 | 
1238 | All of the three issues are unlike regular sets in which the element already
1239 | exists and is in sync. In all of the above examples, the elements need to
1240 | first be inserted and then be synced across all the directives.
1241 |   
1242 | To do this `syncNode` and `syncClone` functions are being used. Both of them
1243 | recursively call the `update` function because it handles `computed` values.
1244 |   
1245 | - `syncNode` runs before inserting the element (due to being evaled in `if[not]`)
1246 | - `syncClone` runs after inserting the element (due to needing eval of `if[not]`)
1247 |   
1248 | Evaluating whether the element is to be displayed or not should be done before it
1249 | is inserted into the DOM.
1250 |   
1251 | All of this convoluted code can be improved by refactoring to separate _insert,sync_ 
1252 | and _set_ logic from one another.
1253 |   
1254 | Another point to note is that objects being set also recursively call.
1255 | 
1256 | 
1257 | ## HTMLTemplateElement based Components
1258 | 
1259 | Components use the ShadowDOM, regular DOM based components are not used
1260 | because:
1261 | 
1262 | 1. They don't work as expected.
1263 | 2. They don't provide encapsulation.
1264 | 
1265 | ### Registration
1266 | 
1267 | Components are auto registered twice:
1268 | 1. Immediately when `sb.init` is called. This will register all the templates 
1269 |    defined before the script tag containing `sb.init` but not after.
1270 | 2. After document has been loaded, i.e. when `readyState` changes to "interactive"
1271 |    this will load all of the components defined in the html file.
1272 |      
1273 | External components can be registered using `sb.load`, example:
1274 | 
1275 | ```javascript
1276 | sb.load('templates.html');
1277 | ```
1278 | 
1279 | or to load multiple templates:
1280 | 
1281 | ```javascript
1282 | sb.load(['templates-one.html', 'templates-two.html]);
1283 | ```
1284 | 
1285 | Externally definied components are loaded async, so if you want to run code after
1286 | the external components have been definied you can run it in a module script tag.
1287 | 
1288 | 
1289 | ```html
1290 | <script type="module">
1291 |   await sb.load('templates.html');
1292 | </script>
1293 | ```
1294 | 
1295 | **Note**: script tags inside externally definied templates will not be executed.
1296 | This is a security detail.
1297 | 
1298 | ### Styling
1299 | 
1300 | Template based components grant encasulation on styling:
1301 | ```html 
1302 | <template name="blue-h1">
1303 |   <h1><slot /></h1>
1304 |   <style>
1305 |     h1 {
1306 |       color: blue;
1307 |     }
1308 |   </style>
1309 | </template>
1310 | ```
1311 | 
1312 | In the above html, the style element is scoped only to the component `<blue-h1>`
1313 | and this styling is not applied to other regular `<h1>` elements outside the
1314 | template.
1315 | 
1316 | ### Script
1317 | 
1318 | Scripts inside a template execute in the global context by default. 
1319 | 
1320 | ```html 
1321 | <template name="blue-h1">
1322 |   <h1 style="color: blue"><slot /></h1>
1323 |   <script>
1324 |     console.log('Hello, World!');
1325 |   </script>
1326 | </template>
1327 | ```
1328 | 
1329 | Execution takes place when the component is being rendered. For example when
1330 | the following HTML is encountered by the parser:
1331 |   
1332 | ```html
1333 | <blue-h1>Hello, World!</blue-h1>
1334 | ```
1335 |  
1336 | The script is **not** executed whent the `<template>` HTML is parsed or
1337 | when the component is registered.
1338 | 
1339 | 
1340 | ## Performance Numbers
1341 | 
1342 | All times are in ms. `performance.mark` is neutered for sec hence low res.
1343 |   
1344 | divs:    1_000
1345 | |             append | min:    1.900 | max:    3.600 | avg:    2.800 |
1346 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.025 |
1347 | |   querySelectorAll | min:    0.000 | max:    0.100 | avg:    0.025 |
1348 | |             remove | min:    0.700 | max:    1.200 | avg:    0.875 |
1349 | 
1350 | divs:   10_000
1351 | |             append | min:   23.000 | max:   27.500 | avg:   24.650 |
1352 | |     getElementById | min:    0.000 | max:    0.000 | avg:    0.000 |
1353 | |   querySelectorAll | min:    0.100 | max:    0.200 | avg:    0.125 |
1354 | |             remove | min:    9.700 | max:   14.300 | avg:   12.175 |
1355 | 
1356 | divs:   10_000 (With body MutationObserver)
1357 | |             append | min:   35.800 | max:   49.400 | avg:   40.125 |
1358 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.025 |
1359 | |   querySelectorAll | min:    0.200 | max:    0.300 | avg:    0.250 |
1360 | |             remove | min:   29.400 | max:   34.700 | avg:   32.975 |
1361 | 
1362 | divs:   10_000 (With body MutationObserver disconnected)
1363 | |             append | min:   14.900 | max:   22.900 | avg:   16.975 |
1364 | |     getElementById | min:    0.000 | max:    0.000 | avg:    0.000 |
1365 | |   querySelectorAll | min:    0.200 | max:    0.300 | avg:    0.225 |
1366 | |             remove | min:    5.000 | max:    6.900 | avg:    5.725 |
1367 | 
1368 | divs:  100_000
1369 | |             append | min:  284.000 | max:  328.700 | avg:  310.500 |
1370 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.025 |
1371 | |   querySelectorAll | min:    1.300 | max:    1.400 | avg:    1.325 |
1372 | |             remove | min:  107.800 | max:  140.200 | avg:  123.900 |
1373 | 
1374 | divs:  100_000 (With body MutationObserver)
1375 | |             append | min:  509.800 | max:  578.700 | avg:  556.625 |
1376 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.025 |
1377 | |   querySelectorAll | min:    3.400 | max:    4.400 | avg:    3.925 |
1378 | |             remove | min:  353.000 | max:  437.700 | avg:  403.125 |
1379 | 
1380 | divs:  100_000 (With body MutationObserver disconnected)
1381 | |             append | min:  290.400 | max:  360.200 | avg:  317.175 |
1382 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.050 |
1383 | |   querySelectorAll | min:    1.200 | max:    1.400 | avg:    1.300 |
1384 | |             remove | min:  108.200 | max:  120.300 | avg:  115.925 |
1385 | 
1386 | divs: 1_000_000
1387 | |             append | min: 1250.500 | max: 1360.500 | avg: 1311.200 |
1388 | |     getElementById | min:    0.000 | max:    0.100 | avg:    0.025 |
1389 | |   querySelectorAll | min:   12.300 | max:   15.500 | avg:   13.875 |
1390 | |             remove | min:  508.900 | max:  608.200 | avg:  539.450 |
1391 | */
1392 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sberry",
 3 |   "version": "0.0.3-alpha.0",
 4 |   "homepage": "http://18alantom.github.io/strawberry",
 5 |   "description": "Zero-dependecy, build-free framework for the artisanal web.",
 6 |   "main": "dist/sb.min.js",
 7 |   "license": "MIT",
 8 |   "files": [
 9 |     "dist"
10 |   ],
11 |   "scripts": {
12 |     "dev": "esbuild ./index.ts --bundle --format=iife --global-name=sb --watch --outfile=index.js",
13 |     "dist": "./dist.sh",
14 |     "pub": "tsc && yarn dist && yarn publish --access public && ./postpub.sh"
15 |   },
16 |   "devDependencies": {
17 |     "esbuild": "^0.17.15",
18 |     "typescript": "^5.0.3"
19 |   },
20 |   "author": {
21 |     "name": "Alan Tom",
22 |     "email": "2.alan.tom@gmail.com",
23 |     "web": "https://github.com/18alantom"
24 |   },
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git+https://github.com/18alantom/strawberry.git"
28 |   },
29 |   "bugs": {
30 |     "url": "https://github.com/18alantom/strawberry/issues"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/postpub.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # This script is used to update the unpkg URL after
 4 | # a new version of strawberry has been released.
 5 | #
 6 | # This link is used in a couple of files such as
 7 | # - website/index.html for the script:src tag
 8 | # - setup.sh for pulling sb.min.js from unpkg
 9 | # - pubwebsite.sh for updating the inventory example's version
10 | # - **/README.md for the same reasons as above
11 | 
12 | # Construct URL for latest
13 | version=$(cat package.json | grep '"version"' | cut -d'"' -f4)
14 | cdn_url="https://unpkg.com/sberry@$version/dist/sb.min.js"
15 | 
16 | # Replace all old URLs with latest
17 | grep -rlE  --exclude-dir=node_modules "https://unpkg.com/sberry@[0-9]+\.[0-9]+\.[0-9]+(-(alpha|beta)\.[0-9]+)?" . \
18 | | xargs sed -i '' -Ee "s#https://unpkg\.com/sberry@[0-9]+\.[0-9]+\.[0-9]+(-(alpha|beta)\.[0-9]+)?/dist/sb\.min\.js#$cdn_url#g"
19 | 
20 | 
21 | git add .
22 | 
23 | # URLS
24 | echo "CDN URLs have been updated to $cdn_url\nverify and commit"


--------------------------------------------------------------------------------
/pubwebsite.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # This script is used to publish the website
 4 | # since the website depends on all local links
 5 | # it first pulls the dependencies.
 6 | # 
 7 | # After that it asks whether to publish the website
 8 | # if yes then it pushes the contents of `./website`
 9 | # to the `gh-pages` branch of this repo.
10 | 
11 | # abort on errors
12 | set -e
13 | 
14 | cd website
15 | 
16 | curl -so sb.min.js https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js
17 | curl -so highlight.min.js https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js
18 | 
19 | 
20 | # Ask whether to publish the website
21 | read -p "Publish the website? [y/n]: " choice
22 | if [ "$choice" = "y" ] || [ "$choice" = "Y" ]; then
23 |   git init
24 |   git add -A
25 |   git commit -m 'publish website'
26 |   git push -f git@github.com:18alantom/strawberry.git main:gh-pages
27 | 
28 |   rm -rf .git
29 | fi
30 | 
31 | 
32 | cd -


--------------------------------------------------------------------------------
/setup.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | if [ -d "sb-starter" ]; then
 4 |   echo "Folder sb-starter already exists. Exiting."
 5 |   exit 1
 6 | fi
 7 | 
 8 | mkdir sb-starter
 9 | cd sb-starter
10 | 
11 | curl -so sb.min.js https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js
12 | index_html=$(cat <<EOF
13 | <!DOCTYPE html>
14 | <html lang="en">
15 |   <head>
16 |     <meta charset="UTF-8" />
17 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
18 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19 |     <title>Strawberry App</title>
20 |     <script src="sb.min.js"></script>
21 |   </head>
22 | 
23 |   <style>
24 |     body {
25 |       background: hsla(43, 58%, 95%, 1);
26 |       height: 100vh;
27 |       width: 100vw;
28 |       display: flex;
29 |       justify-content: center;
30 |       align-items: center;
31 |     }
32 |   </style>
33 | 
34 |   <!-- Template Definitions -->
35 |   <template name="sb-block">
36 |     <div
37 |       style="
38 |         padding: 1rem;
39 |         background-color: hsla(43, 58%, 92%, 1);
40 |         border: 2px solid hsla(17, 48%, 16%, 1);
41 |         box-shadow: -4px 4px 0px rgba(0, 0, 0, 0.25);
42 |       "
43 |     >
44 |       <slot />
45 |     </div>
46 |   </template>
47 |   <template name="sb-h1">
48 |     <h1
49 |       style="
50 |         margin: 0;
51 |         font-family: sans-serif;
52 |         font-weight: bold;
53 |         width: fit-content;
54 |         color: hsla(6, 64%, 59%, 1);
55 |       "
56 |     >
57 |       <slot />
58 |     </h1>
59 |   </template>
60 | 
61 |   <!-- Initialize Strawberry -->
62 |   <script>
63 |     const data = sb.init();
64 |   </script>
65 | 
66 |   <!-- HTML Body -->
67 |   <body>
68 |     <!-- Use defined components -->
69 |     <sb-block>
70 |       <sb-h1 sb-mark="message">Hello, World!</sb-h1>
71 |     </sb-block>
72 | 
73 |     <!-- Update Component -->
74 |     <script>
75 |       data.message = 'Hello, Strawberry! 🍓';
76 |     </script>
77 |   </body>
78 | </html>
79 | EOF
80 | )
81 | 
82 | echo "$index_html" > index.html
83 | cd ..
84 | echo "sb-starter setup completed
85 | open sb-starter/index.html and start coding :)"


--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   html {
 3 |     background-color: black;
 4 |     font-family: sans-serif;
 5 |     padding: 1rem;
 6 |   }
 7 | 
 8 |   a {
 9 |     font-size: 1.5rem;
10 |     text-transform: capitalize;
11 |     margin-bottom: 0.5rem;
12 |     text-decoration: none;
13 |     color: lightcoral;
14 |   }
15 | 
16 |   a:after {
17 |     content: ' →';
18 |   }
19 | 
20 |   a:visited {
21 |     color: lightcoral;
22 |   }
23 | 
24 |   iframe {
25 |     border: 1px solid lightblue;
26 |     width: calc(325px + 2rem + 6px);
27 |     height: calc(128px + 2rem + 3px);
28 |   }
29 | 
30 |   section {
31 |     display: flex;
32 |     flex-direction: column;
33 |   }
34 | </style>
35 | <div style="display: flex; flex-wrap: wrap; gap: 2rem">
36 |   <section>
37 |     <a href="./test.html">general</a>
38 |     <iframe src="./test.html"></iframe>
39 |   </section>
40 |   <section>
41 |     <a href="./test.templates.html">templates</a>
42 |     <iframe src="./test.templates.html"></iframe>
43 |   </section>
44 |   <section>
45 |     <a href="./test.loops.html">loops</a>
46 |     <iframe src="./test.loops.html"></iframe>
47 |   </section>
48 |   <section>
49 |     <a href="./test.computed.html">computed</a>
50 |     <iframe src="./test.computed.html"></iframe>
51 |   </section>
52 |   <section>
53 |     <a href="./test.conditionals.html">conditionals</a>
54 |     <iframe src="./test.conditionals.html"></iframe>
55 |   </section>
56 |   <section>
57 |     <a href="./test.directives.html">directives</a>
58 |     <iframe src="./test.directives.html"></iframe>
59 |   </section>
60 | </div>
61 | <!-- 
62 | TODO: Tests:
63 | - [ ] Custom Prefix
64 | - [ ] Template and Loop tests
65 |  -->
66 | 


--------------------------------------------------------------------------------
/tests/templates.html:
--------------------------------------------------------------------------------
1 | <template name="red-p">
2 |   <p style="color: red"><slot /></p>
3 | </template>
4 | 
5 | <template name="green-p">
6 |   <p style="color: green"><slot /></p>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/tests/test.computed.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Sb Test - Computed</title>
  8 |     <link rel="stylesheet" href="test.css" />
  9 | 
 10 |     <script src="../index.js"></script>
 11 |     <script src="./test.js"></script>
 12 |   </head>
 13 | 
 14 |   <body>
 15 |     <script>
 16 |       const data = sb.init();
 17 |     </script>
 18 | 
 19 |     <main>
 20 |       <h1>Computed Tests</h1>
 21 |       <div>
 22 |         <p>Success: <span id="success">0</span></p>
 23 |         <p>Failure: <span id="failure">0</span></p>
 24 |         <p>Total: <span id="total">0</span></p>
 25 |       </div>
 26 |     </main>
 27 | 
 28 |     <p sb-mark="b" id="p1"></p>
 29 |     <script>
 30 |       data.a = 10;
 31 |       data.b = () => data.a + 10;
 32 |       test(data.b === 20, 'b is 20, arrow func');
 33 | 
 34 |       const p1 = document.getElementById('p1');
 35 |       test(p1.innerText === '20', 'p1 innerText is 20');
 36 |       test(data.b === 20, 'b is 20, arrow func');
 37 | 
 38 |       let b_reg_execCount = 0;
 39 |       data.b_reg = function () {
 40 |         b_reg_execCount += 1;
 41 |         return this.a + 10;
 42 |       };
 43 |       test(b_reg_execCount === 2, 'b_reg is executed twice on set');
 44 |       test(data.b_reg === 20, 'b_reg is 20, regular func (use this)');
 45 | 
 46 |       data.b_reg_data = function () {
 47 |         return data.a + 10;
 48 |       };
 49 |       test(data.b_reg_data === 20, 'b_reg_data is 20, regular func (use data)');
 50 | 
 51 |       data.a = 20;
 52 |       test(p1.innerText === '30', 'p1 innerText is 30 after a change');
 53 |       test(data.b === 30, 'b is 30, arrow func');
 54 |       test(data.b_reg === 30, 'b_reg is 30, regular func (use this)');
 55 |       test(data.b_reg_data === 30, 'b_reg_data is 30, regular func (use data)');
 56 | 
 57 |       data.b = '-';
 58 |       test(p1.innerText === '-', 'p1 innerText is - after update');
 59 | 
 60 |       data.c = 20;
 61 |       data.b = () => data.c.toFixed(2);
 62 |       test(p1.innerText === '20.00', 'p1 innerText is 20.00 reset computed');
 63 | 
 64 |       data.c = 0;
 65 |       test(p1.innerText === '0.00', 'p1 innerText is 0.00 after a change');
 66 | 
 67 |       delete data.c;
 68 |       try {
 69 |         data.b;
 70 |       } catch (err) {
 71 |         test(
 72 |           err.message.includes('undefined'),
 73 |           'getting b throws error after dep c delete'
 74 |         );
 75 |       }
 76 | 
 77 |       data.a = 'hello';
 78 |       data.b = async () => data.a.toUpperCase() + ' WORLD';
 79 |       data.b.then((v) => {
 80 |         test(v === 'HELLO WORLD', 'computed returns promise');
 81 |         test(p1.innerText === 'HELLO WORLD', 'UI updated after promise');
 82 |         // Clear previous elements
 83 |         delete data.b_reg_data;
 84 |         delete data.b_reg;
 85 |         delete data.b;
 86 |         delete data.a;
 87 |       });
 88 |     </script>
 89 | 
 90 |     <p sb-mark="d" id="p2"></p>
 91 |     <script>
 92 |       const p2 = document.getElementById('p2');
 93 |       data.c = [1, 2, 3, 4, 5];
 94 |       data.d = () => data.c.reduce((a, b) => a + b);
 95 | 
 96 |       test(data.d === 15, 'computed from array reduce');
 97 |       test(p2.innerText === '15', 'ui updated from array reduce computed');
 98 | 
 99 |       data.c.pop();
100 |       test(data.d === 10, 'computed from array pop');
101 |       test(p2.innerText === '10', 'computed from array reduce pop');
102 | 
103 |       data.x = [{ val: true }, { val: false }];
104 |       data.y = () => data.x.filter((v) => v.val);
105 | 
106 |       test(data.y.length === 1, 'y is filtered version of x');
107 |       test(data.y[0] !== data.x[0], 'y[0] is a clone of x[0]');
108 |       data.d = '';
109 |     </script>
110 | 
111 |     <p sb-mark="d.a"></p>
112 |     <p sb-mark="d.b"></p>
113 |     <p sb-mark="d.c"></p>
114 |     <p sb-mark="d.d"></p>
115 |     <p sb-mark="d.e"></p>
116 |     <p sb-mark="d.f"></p>
117 |     <script>
118 |       const pda = document.querySelector(`[sb-mark="d.a"]`);
119 |       const pdb = document.querySelector(`[sb-mark="d.b"]`);
120 |       const pdc = document.querySelector(`[sb-mark="d.c"]`);
121 |       const pdd = document.querySelector(`[sb-mark="d.d"]`);
122 |       const pde = document.querySelector(`[sb-mark="d.e"]`);
123 |       const pdf = document.querySelector(`[sb-mark="d.f"]`);
124 | 
125 |       data.d = {
126 |         a: 2,
127 |         b() {
128 |           return this.a + 2;
129 |         },
130 |         c: () => {
131 |           return data.d.a + 4;
132 |         },
133 |       };
134 |       test(pda.innerText === '2', 'pda is 2');
135 |       test(pdb.innerText === '4', 'pdb is 4');
136 |       test(pdc.innerText === '6', 'pdc is 6');
137 |       test(pdd.innerText === '', 'pdd is empty');
138 |       test(pde.innerText === '', 'pde is empty');
139 |       test(pdf.innerText === '', 'pdf is empty');
140 | 
141 |       test(data.d.a === 2, 'd.a is 2');
142 |       test(
143 |         data.d.b === 4,
144 |         'd.b is 4, regular function works (use this, preset computed)'
145 |       );
146 |       test(data.d.c === 6, 'd.c is 6, arrow function works (preset computed)');
147 | 
148 |       data.d.d = function () {
149 |         return this.a + 6;
150 |       };
151 |       test(pdd.innerText === '8', 'pdd is 8');
152 |       test(
153 |         data.d.d === 8,
154 |         'd.d is 6, regular function works (use this, postset computed)'
155 |       );
156 | 
157 |       data.d.e = () => {
158 |         return data.d.a + 8;
159 |       };
160 | 
161 |       test(pde.innerText === '10', 'pde is 10');
162 |       test(
163 |         data.d.e === 10,
164 |         'd.e is 10, arrow function works (postset computed)'
165 |       );
166 | 
167 |       data.d.f = function () {
168 |         return ['a', 'b', 'c', 'd', 'e'].reduce((acc, x) => acc + this[x], 0);
169 |       };
170 | 
171 |       test(
172 |         data.d.f === 30,
173 |         'd.f is 30, computed with second order dependency works'
174 |       );
175 |       test(pdf.innerText === '30', 'pdf is 30');
176 | 
177 |       data.d.a = 1;
178 |       test(pda.innerText === '1', 'pda is 1 after d.a change');
179 |       test(pdb.innerText === '3', 'pdb is 3 after d.a change');
180 |       test(pdc.innerText === '5', 'pdc is 5 after d.a change');
181 |       test(pdd.innerText === '7', 'pdd is 7 after d.a change');
182 |       test(pde.innerText === '9', 'pde is 9 after d.a change');
183 |       test(pdf.innerText === '25', 'pdf is 25 after d.a change');
184 |     </script>
185 |   </body>
186 | </html>
187 | 


--------------------------------------------------------------------------------
/tests/test.conditionals.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Sb Test - Conditionals</title>
  8 |     <link rel="stylesheet" href="test.css" />
  9 | 
 10 |     <script src="../index.js"></script>
 11 |     <script src="./test.js"></script>
 12 |   </head>
 13 | 
 14 |   <body>
 15 |     <main>
 16 |       <h1>Conditionals Tests</h1>
 17 |       <div>
 18 |         <p>Success: <span id="success">0</span></p>
 19 |         <p>Failure: <span id="failure">0</span></p>
 20 |         <p>Total: <span id="total">0</span></p>
 21 |       </div>
 22 |     </main>
 23 | 
 24 |     <p id="p1" sb-if="a" sb-mark="msg"></p>
 25 |     <template sb-if="b">
 26 |       <p id="p2" sb-mark="msg"></p>
 27 |     </template>
 28 | 
 29 |     <script>
 30 |       const data = sb.init();
 31 |       data.msg = 'hello';
 32 |       data.a = true;
 33 |       data.b = false;
 34 | 
 35 |       test(document.getElementById('p1').innerText === 'hello', 'p1 is hello');
 36 |       test(document.getElementById('p2') === null, 'p2 is not found');
 37 | 
 38 |       data.b = true;
 39 |       test(
 40 |         document.getElementById('p2').innerText === 'hello',
 41 |         'p2 is hello after sync'
 42 |       );
 43 | 
 44 |       data.a = false;
 45 |       data.b = false;
 46 |       data.msg = 'world';
 47 |       test(document.getElementById('p1') === null, 'p1 is not found');
 48 | 
 49 |       data.a = true;
 50 |       test(
 51 |         document.getElementById('p1').innerText === 'world',
 52 |         'p1 is world after sync'
 53 |       );
 54 | 
 55 |       data.b = true;
 56 |       test(
 57 |         document.getElementById('p2').innerText === 'world',
 58 |         'p2 is world after sync'
 59 |       );
 60 | 
 61 |       delete data.a;
 62 |       test(
 63 |         document.querySelector('[sb-if="a"]') instanceof HTMLTemplateElement,
 64 |         'if a hidden after delete a'
 65 |       );
 66 | 
 67 |       data.a = true;
 68 |       test(
 69 |         document.querySelector('[sb-if="a"]') instanceof HTMLParagraphElement,
 70 |         'if a visible after set a'
 71 |       );
 72 | 
 73 |       delete data.msg;
 74 |       test(
 75 |         document.querySelector('[sb-if="a"]') === null,
 76 |         'if a not found after delete msg'
 77 |       );
 78 |       test(
 79 |         document.querySelector('[sb-if="b"]') === null,
 80 |         'if b not found after delete msg'
 81 |       );
 82 | 
 83 |       delete data.a;
 84 |       delete data.b;
 85 | 
 86 |       data.a = true;
 87 |       test(
 88 |         document.querySelector('[sb-if="a"]') === null,
 89 |         'if a still not found after set a'
 90 |       );
 91 |     </script>
 92 | 
 93 |     <ul id="ul1">
 94 |       <li sb-if="a" sb-mark="li.#"></li>
 95 |     </ul>
 96 | 
 97 |     <script>
 98 |       data.a = true;
 99 |       data.li = [1, 2, 3];
100 | 
101 |       test(
102 |         document.getElementById('ul1').childElementCount === 4,
103 |         '4 children in ul1'
104 |       );
105 | 
106 |       data.a = false;
107 |       test(
108 |         [...document.getElementById('ul1').children].every(
109 |           (ch) => ch instanceof HTMLTemplateElement
110 |         ),
111 |         'all children in ul1 after a=false are templates'
112 |       );
113 | 
114 |       data.a = true;
115 |       test(
116 |         document.getElementById('ul1').childElementCount === 4,
117 |         '4 children in ul1 after a=true'
118 |       );
119 | 
120 |       data.a = false;
121 |       data.li.push(4);
122 |       test(
123 |         document.getElementById('ul1').childElementCount === 5,
124 |         '5 children in ul1 after push'
125 |       );
126 |       test(
127 |         [...document.getElementById('ul1').children].every(
128 |           (ch) => ch instanceof HTMLTemplateElement
129 |         ),
130 |         'all children in ul1 after a=false and push are templates'
131 |       );
132 | 
133 |       data.a = true;
134 |       test(
135 |         document.getElementById('ul1').childElementCount === 5,
136 |         '5 children in ul1'
137 |       );
138 |       test(
139 |         [...document.getElementById('ul1').children]
140 |           .slice(0, -1)
141 |           .every((ch) => ch instanceof HTMLLIElement),
142 |         'all but last child in ul1 after a=true and push are li'
143 |       );
144 | 
145 |       document.getElementById('ul1').remove();
146 |     </script>
147 | 
148 |     <ul id="ul2" sb-if="a">
149 |       <li sb-mark="li.#"></li>
150 |     </ul>
151 | 
152 |     <script>
153 |       data.li = [];
154 |       data.a = true;
155 |       data.li.push('a');
156 | 
157 |       data.a = false;
158 |       data.li.push('b');
159 | 
160 |       data.a = true;
161 |       test(
162 |         document.getElementById('ul2').childElementCount === 3,
163 |         '3 children in ul2'
164 |       );
165 |       test(
166 |         [...document.getElementById('ul2').children]
167 |           .slice(0, -1)
168 |           .every((ch) => ch instanceof HTMLLIElement),
169 |         'all but last child in ul2 after a=true and push are li'
170 |       );
171 | 
172 |       data.a = false;
173 |       data.li.splice(1, 0, 'x', 'y');
174 | 
175 |       data.a = true;
176 |       test(
177 |         document.getElementById('ul2').childElementCount === 5,
178 |         '5 children in ul2'
179 |       );
180 |       test(
181 |         [...document.getElementById('ul2').children]
182 |           .slice(0, -1)
183 |           .every((ch) => ch instanceof HTMLLIElement),
184 |         'all but last child in ul2 after splice and a=true are li'
185 |       );
186 |       document.getElementById('ul2').remove();
187 |     </script>
188 |     <div id="div1">
189 |       <div sb-if="x">
190 |         <div sb-if="y">
191 |           <p sb-mark="z"></p>
192 |         </div>
193 |       </div>
194 |     </div>
195 | 
196 |     <script>
197 |       data.x = true;
198 |       data.y = true;
199 |       data.z = 'z';
200 |       data.x = false;
201 | 
202 |       const div1 = document.getElementById('div1');
203 |       test(div1.childElementCount === 1, 'div1 has one child');
204 |       test(
205 |         div1.children[0] instanceof HTMLTemplateElement,
206 |         'div1 has one template child'
207 |       );
208 | 
209 |       data.x = true;
210 |       test(
211 |         div1.children[0] instanceof HTMLDivElement,
212 |         'div1 has one div child after x=true'
213 |       );
214 | 
215 |       data.x = false;
216 |       data.y = false;
217 |       data.x = true;
218 |       test(
219 |         div1.children[0] instanceof HTMLDivElement,
220 |         'div1 has one div child after x=false y=false x=true'
221 |       );
222 |       test(
223 |         div1.children[0].children[0] instanceof HTMLTemplateElement,
224 |         'div1[0] has one template child after x=false y=false x=true'
225 |       );
226 | 
227 |       data.x = false;
228 |       test(
229 |         div1.children[0] instanceof HTMLTemplateElement,
230 |         'div1 has template div child after x=false'
231 |       );
232 | 
233 |       data.z = 'zz';
234 |       data.y = true;
235 |       data.x = true;
236 |       const nestedP = div1.children[0].children[0].children[0];
237 |       test(
238 |         nestedP instanceof HTMLParagraphElement,
239 |         'div1[0][0][0] is a p element'
240 |       );
241 | 
242 |       test(nestedP.innerText === 'zz', 'div1[0][0][0] inner text is zz');
243 |     </script>
244 |   </body>
245 | </html>
246 | 


--------------------------------------------------------------------------------
/tests/test.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   margin: 0px;
 4 |   background-color: rgb(0, 0, 0);
 5 |   color: white;
 6 |   font-family: Arial, Helvetica, sans-serif;
 7 | }
 8 | 
 9 | main > h1 {
10 |   color: rgb(219, 126, 155);
11 |   margin: 0px;
12 |   padding: 0px;
13 |   padding: 1rem;
14 |   border-bottom: 3px solid rgb(219, 126, 155);
15 | }
16 | 
17 | main > div {
18 |   display: flex;
19 |   justify-content: space-between;
20 |   padding: 1rem;
21 | }
22 | 
23 | main {
24 |   border: 3px solid rgb(219, 126, 155);
25 |   width: 325px;
26 |   margin: 1rem;
27 | }
28 | 
29 | main > div > p {
30 |   margin: 0px;
31 | }
32 | 
33 | main > div > p:nth-child(1) {
34 |   color: rgb(160, 227, 160);
35 | }
36 | 
37 | main > div > p:nth-child(2) {
38 |   color: rgb(242, 147, 147);
39 | }
40 | 
41 | main > div > p:nth-child(3) {
42 |   color: gainsboro;
43 | }
44 | 


--------------------------------------------------------------------------------
/tests/test.directives.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Sb Test - Directives</title>
  8 |     <script src="../index.js"></script>
  9 |     <link rel="stylesheet" href="test.css" />
 10 |     <script src="./test.js"></script>
 11 |   </head>
 12 |   <body>
 13 |     <main>
 14 |       <h1>Directives Tests</h1>
 15 |       <div>
 16 |         <p>Success: <span id="success">0</span></p>
 17 |         <p>Failure: <span id="failure">0</span></p>
 18 |         <p>Total: <span id="total">0</span></p>
 19 |       </div>
 20 |     </main>
 21 | 
 22 |     <script>
 23 |       let idx = 0;
 24 | 
 25 |       sb.directive('test', ({ value }) => {
 26 |         test(value === 'test_x', 'test value is test_x');
 27 |         idx += 1;
 28 |       });
 29 |     </script>
 30 |     <p sb-test="x"></p>
 31 |     <script>
 32 |       const data = sb.init();
 33 |       test(idx === 0, 'test directive has not run');
 34 |       data.x = 'test_x';
 35 |       test(idx === 1, 'test directive has run (1)');
 36 | 
 37 |       sb.directive(
 38 |         'testparam',
 39 |         ({ key, value, param }) => {
 40 |           test(key === 'y', 'key is y');
 41 |           test(param === 'param-y', 'param value is param-y');
 42 |           test(value === 'test_y', 'testparam directive is param-y');
 43 |           idx += 1;
 44 |         },
 45 |         true
 46 |       );
 47 |     </script>
 48 | 
 49 |     <p sb-testparam="y:param-y"></p>
 50 |     <script>
 51 |       data.y = 'test_y';
 52 |       test(idx === 2, 'testparam directive has run (2)');
 53 | 
 54 |       sb.directive(
 55 |         'testloop',
 56 |         ({ key, el, value, param }) => {
 57 |           const mark = el.getAttribute('sb-mark');
 58 |           if (mark.endsWith('.#')) {
 59 |             return;
 60 |           }
 61 |           test(key === 'z', 'key is z');
 62 |           test(/\.\d+$/.test(mark), 'mark key is a number');
 63 |           test(value === 'test_z', 'loop test run');
 64 |           test(param === 'param-z', 'param value is param-z');
 65 |           idx += 1;
 66 |         },
 67 |         true
 68 |       );
 69 |     </script>
 70 | 
 71 |     <div><p sb-mark="list.#" sb-testloop="z:param-z"></p></div>
 72 |     <script>
 73 |       data.z = 'test_z';
 74 |       data.list = [1, 2];
 75 |       test(idx === 4, 'testloop directive has run (4)');
 76 | 
 77 |       data.list.push(3);
 78 |       test(idx === 5, 'testloop directive has run (5)');
 79 |       data.list = [];
 80 | 
 81 |       sb.directive(
 82 |         'testcond',
 83 |         ({ key, value, param }) => {
 84 |           test(key === 'w', 'key is w');
 85 |           test(param === 'param-w', 'param value is param-w');
 86 |           test(typeof value === 'function', 'value is a function');
 87 |           test(value() === 'test_w', 'value returned test_w');
 88 |           idx += 1;
 89 |         },
 90 |         true
 91 |       );
 92 |     </script>
 93 |     <template sb-if="a">
 94 |       <p sb-testcond="w:param-w"></p>
 95 |     </template>
 96 |     <script>
 97 |       data.w = () => () => 'test_w';
 98 |       test(idx === 5, 'testcond directive has not run (5)');
 99 |       data.a = true;
100 |       test(idx === 6, 'testcond directive has run (6)');
101 | 
102 |       data.a = false;
103 |       test(idx === 6, 'testcond directive has not run (6)');
104 |       data.a = true;
105 |       test(idx === 7, 'testcond directive has not run (7)');
106 |     </script>
107 |   </body>
108 | </html>
109 | 


--------------------------------------------------------------------------------
/tests/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Sb Test - General</title>
  8 |     <script src="../index.js"></script>
  9 |     <link rel="stylesheet" href="test.css" />
 10 |     <script src="./test.js"></script>
 11 |   </head>
 12 |   <template name="red-p">
 13 |     <p style="color: red">
 14 |       <slot />
 15 |     </p>
 16 |   </template>
 17 |   <body>
 18 |     <main>
 19 |       <h1>General Tests</h1>
 20 |       <div>
 21 |         <p>Success: <span id="success">0</span></p>
 22 |         <p>Failure: <span id="failure">0</span></p>
 23 |         <p>Total: <span id="total">0</span></p>
 24 |       </div>
 25 |     </main>
 26 |     <script>
 27 |       test(typeof sb === 'object', 'sb is function');
 28 | 
 29 |       const data = sb.init();
 30 |       test(typeof sb.watch === 'function', 'sb.watch is function');
 31 |       test(typeof sb.unwatch === 'function', 'sb.unwatch is function');
 32 |       test(typeof sb.register === 'function', 'sb.register is function');
 33 |       test(data === sb.init(), 'sb returns same data');
 34 | 
 35 |       data.x = 10;
 36 |       test(data.x === 10, 'x (value) set on data');
 37 | 
 38 |       data.y = () => data.x + 5;
 39 |       test(data.y === 15, 'y (computed) set on data');
 40 | 
 41 |       const rp = document.createElement('red-p').shadowRoot?.lastElementChild
 42 |       test(rp instanceof HTMLParagraphElement, 'el red-p has p shadowRoot');
 43 |       test(rp.style.color === 'red', 'red-p has style.color red');
 44 | 
 45 |       delete data.x;
 46 |       delete data.y;
 47 |     </script>
 48 | 
 49 |     <p id="1" sb-mark="a">notset</p>
 50 |     <script>
 51 |       const p1 = document.getElementById('1');
 52 |       test(p1.isConnected, 'p#1 connected');
 53 |       test(p1.innerText === 'notset', 'p#1 data not set');
 54 | 
 55 |       data.a = 'set';
 56 |       test(p1.innerText === 'set', 'p#1 data set');
 57 | 
 58 |       data.a = 'changed';
 59 |       test(p1.innerText === 'changed', 'p#1 data changed');
 60 | 
 61 |       delete data.a;
 62 |       test(!p1.isConnected, 'p#1 not connected');
 63 |     </script>
 64 | 
 65 |     <template name="green-p">
 66 |       <p style="color: green">
 67 |         <slot />
 68 |       </p>
 69 |     </template>
 70 |     <script>
 71 |       let gp = document.createElement('green-p').shadowRoot?.children[0];
 72 |       test(gp === undefined, 'green-p not registered');
 73 | 
 74 |       sb.register();
 75 |       gp = document.createElement('green-p').shadowRoot?.lastElementChild;
 76 |       test(gp instanceof HTMLParagraphElement, 'el green-p has p shadowRoot');
 77 |       test(gp.style.color === 'green', 'green-p has style.color green');
 78 |     </script>
 79 | 
 80 |     <red-p id="2" sb-mark="a">red</red-p>
 81 |     <green-p id="3" sb-mark="b">green</green-p>
 82 |     <script>
 83 |       const p2 = document.getElementById('2');
 84 |       const p3 = document.getElementById('3');
 85 |       test(p2.tagName.toLowerCase() === 'red-p', 'p#2 is red-p');
 86 |       test(p3.tagName.toLowerCase() === 'green-p', 'p#3 is red-p');
 87 |       test(p2.innerText === 'red', 'p#2 data not set');
 88 |       test(p3.innerText === 'green', 'p#3 data not set');
 89 | 
 90 |       data.a = 'RED';
 91 |       data.b = 'GREEN';
 92 |       test(p2.innerText === 'RED', 'p#2 data set');
 93 |       test(p3.innerText === 'GREEN', 'p#3 data set');
 94 | 
 95 |       data.b = () => data.a.toLowerCase();
 96 |       test(p3.innerText === 'red', 'p#3 data computed');
 97 | 
 98 |       data.a = 'GREEN';
 99 |       test(p3.innerText === 'green', 'p#3 data set from computed');
100 | 
101 |       delete data.a;
102 |       test(!p2.isConnected, 'p#2 not connected');
103 |       delete data.b;
104 |       test(!p3.isConnected, 'p#3 not connected');
105 |     </script>
106 | 
107 |     <template sb-if="a">
108 |       <p id="4">temp</p>
109 |     </template>
110 |     <script>
111 |       test(document.getElementById('4') === null, 'p#4 not found');
112 | 
113 |       data.a = false;
114 |       test(document.getElementById('4') === null, 'p#4 still not found');
115 | 
116 |       data.a = true;
117 |       const p4 = document.getElementById('4');
118 |       test(p4 instanceof HTMLParagraphElement, 'p#4 found');
119 | 
120 |       data.a = false;
121 |       test(!p4.isConnected, 'p#4 is not connected after false');
122 | 
123 |       data.a = true;
124 | 
125 |       const p4Clone = document.getElementById('4');
126 |       test(p4 !== p4Clone, 'p#4 different from clone');
127 |       test(p4Clone.isConnected, 'p#4 clone is connected');
128 |       test(!p4.isConnected, 'p#4 is not connected after clone');
129 | 
130 |       delete data.a;
131 |       test(!p4Clone.isConnected, 'p#4 clone is not connected');
132 | 
133 |       data.a = true;
134 |       test(
135 |         document.getElementById('4') instanceof HTMLParagraphElement,
136 |         'p#4 found after delete and set'
137 |       );
138 |       delete data.a;
139 |     </script>
140 | 
141 |     <p id="5" sb-mark="b">notset</p>
142 |     <script>
143 |       const p5 = document.getElementById('5');
144 |       test(p5.innerText === 'notset', 'p#5 data not set');
145 |       data.a = 'stuff';
146 |       data.b = () => [data.a, data.a].join(',');
147 | 
148 |       test(
149 |         p5.innerText === ['stuff', 'stuff'].join(','),
150 |         'p#5 (computed) data set'
151 |       );
152 |       data.a = 'thing';
153 |       test(
154 |         p5.innerText === ['thing', 'thing'].join(','),
155 |         'p#5 (computed) data updated'
156 |       );
157 | 
158 |       delete data.a;
159 |       test(
160 |         p5.innerText === ['thing', 'thing'].join(','),
161 |         'p#5 (computed) data save after a delete'
162 |       );
163 | 
164 |       delete data.b;
165 |       test(!p5.isConnected, 'p#5 not connected after b (computed) delete');
166 | 
167 |       data.c = 0;
168 |       let w = 0;
169 |       const w1 = (nv) => test(nv === 1, 'watch 1 working');
170 |       const w2 = () => w++;
171 | 
172 |       sb.watch('c', w1);
173 |       sb.watch('c', w2);
174 | 
175 |       data.c = 1;
176 |       test(w === 1, 'watch 2 ran');
177 | 
178 |       sb.unwatch('c', w1);
179 |       data.c = 5;
180 |       test(w === 2, 'watch 2 ran again');
181 | 
182 |       sb.unwatch('c', w2);
183 |       data.c = 1;
184 |       test(w === 2, 'watch 2 removed');
185 | 
186 |       delete data.c;
187 |       delete data.b;
188 |       delete data.a;
189 | 
190 |       data.a = 1;
191 |       data.b = () => data.a + 1;
192 | 
193 |       sb.watch('b', (v) => test(v === 3, 'watch 3 working'));
194 |       sb.watch('b', (v) => test(typeof v === 'number', 'watch 4 working'));
195 |       data.a = 2;
196 | 
197 |       sb.unwatch('b');
198 |       delete data.b;
199 |       data.a = 3;
200 | 
201 |       sb.watch('b', (v) =>
202 |         test(v === 4 || v === undefined, `watch 5 (${v}) is working`)
203 |       );
204 | 
205 |       data.b = 4;
206 |       delete data.b;
207 |       sb.unwatch();
208 |       delete data.a;
209 |     </script>
210 | 
211 |     <div id="l1">
212 |       <red-p sb-mark="l1.#"></red-p>
213 |     </div>
214 |     <script>
215 |       const l1 = document.getElementById('l1');
216 |       test(l1.childElementCount === 1, 'div#l1 has one child');
217 | 
218 |       data.l1 = ['a'];
219 |       test(l1.childElementCount === 2, 'div#l1 has two children');
220 |       test(l1.children[0]?.innerText === 'a', 'div#l1 child 0 is a');
221 |       test(
222 |         l1.children[0]?.tagName.toLowerCase() === 'red-p',
223 |         'div#l1 child elem is red-p'
224 |       );
225 | 
226 |       data.l1.push('b');
227 |       test(l1.childElementCount === 3, 'div#l1 has three children');
228 |       test(l1.children[1]?.innerText === 'b', 'div#l1 child 1 is b');
229 | 
230 |       data.l1.pop();
231 |       test(l1.childElementCount === 2, 'div#l1 one child removed');
232 |       test(l1.children[0]?.innerText === 'a', 'div#l1 child 0 is a');
233 | 
234 |       const ch0 = l1.children[0];
235 |       data.l1 = ['a'];
236 |       test(ch0 !== l1.children[0], 'div#l1 children replaced');
237 |       data.l1 = [];
238 |       test(
239 |         l1.children[0] instanceof HTMLTemplateElement,
240 |         'div#l1 has template child'
241 |       );
242 |     </script>
243 | 
244 |     <template name="div-user">
245 |       <div>
246 |         <h1><slot name="name" /></h1>
247 |         <p><slot name="age" /></p>
248 |       </div>
249 |     </template>
250 |     <script>
251 |       sb.register();
252 |     </script>
253 | 
254 |     <!-- user mark applied for deletion -->
255 |     <div-user id="du1" sb-mark="user">
256 |       <span slot="name" sb-mark="user.name"></span>
257 |       <span slot="age" sb-mark="user.age"></span>
258 |     </div-user>
259 |     <script>
260 |       const du1 = document.getElementById('du1');
261 |       const du1div = du1.shadowRoot.lastElementChild;
262 |       test(du1div instanceof HTMLDivElement, 'el#du1 has shadowRoot div');
263 | 
264 |       const du1h1 = du1div.children[0];
265 |       test(du1h1 instanceof HTMLHeadingElement, 'el#du1 has a h# element');
266 | 
267 |       const du1p = du1div.children[1];
268 |       test(du1p instanceof HTMLParagraphElement, 'el#du1 has a p element');
269 |       test(
270 |         document.querySelector('[sb-mark="user.name"]') instanceof
271 |           HTMLSpanElement,
272 |         'user.name el is a span'
273 |       );
274 |       test(
275 |         document.querySelector('[sb-mark="user.age"]') instanceof
276 |           HTMLSpanElement,
277 |         'user.age el is a span'
278 |       );
279 | 
280 |       data.user = {};
281 |       const nameSpan = document.querySelector('[sb-mark="user.name"]');
282 |       const ageSpan = document.querySelector('[sb-mark="user.age"]');
283 |       test(nameSpan instanceof HTMLSpanElement, 'user.name is a span');
284 |       test(nameSpan.innerText === '', 'user.name span is empty');
285 |       test(ageSpan instanceof HTMLSpanElement, 'user.age is a span');
286 |       test(ageSpan.innerText === '', 'user.age span is empty');
287 | 
288 |       data.user.name = 'test';
289 |       test(nameSpan.innerText === 'test', 'user.name span text set');
290 |       test(ageSpan.innerText === '', 'user.age span still empty');
291 | 
292 |       data.user.age = 99;
293 |       test(ageSpan.innerText === '99', 'user.age span text set');
294 | 
295 |       delete data.user.age;
296 |       test(!ageSpan.isConnected, 'ageSpan removed on delete');
297 | 
298 |       data.user.age = 0;
299 |       test(!ageSpan.isConnected, 'ageSpan still removed after value set');
300 | 
301 |       data.user = { name: 'TEST', age: 55 };
302 |       test(du1.isConnected, 'el#du1 still connected after reassign');
303 |       test(du1.children.length === 1, 'el#du1 has only one child after reset');
304 |       test(
305 |         du1.children[0].innerText === 'TEST',
306 |         'new user.name span has updated text'
307 |       );
308 | 
309 |       delete data.user;
310 |       test(!du1.isConnected, 'el#du1 disconnected after user delete');
311 |     </script>
312 | 
313 |     <div id="d1">
314 |       <div-user sb-mark="users.#">
315 |         <span slot="name" sb-mark="users.#.name"></span>
316 |         <span slot="age" sb-mark="users.#.age"></span>
317 |       </div-user>
318 |     </div>
319 |     <script>
320 |       const d1 = document.getElementById('d1');
321 |       data.users = [];
322 |       test(d1.children.length === 1, 'el#d1 has one child');
323 | 
324 |       data.users.push({ name: 'A', age: 1 });
325 |       test(d1.children.length === 2, 'el#d1 has two children');
326 |       test(
327 |         d1.children[0].children[0].innerText === 'A',
328 |         'el#d1[0][0] innerText is A'
329 |       );
330 |       test(
331 |         d1.children[0].children[1].innerText === '1',
332 |         'el#d1[0][1] innerText is 1'
333 |       );
334 | 
335 |       data.users.push({ name: 'B', age: 2 });
336 |       test(d1.children.length === 3, 'el#d1 has three children');
337 |       test(
338 |         d1.children[0].children[0].innerText === 'A',
339 |         'el#d1[0][0] innerText is still A'
340 |       );
341 |       test(
342 |         d1.children[0].children[1].innerText === '1',
343 |         'el#d1[0][1] innerText is still 1'
344 |       );
345 |       test(
346 |         d1.children[1].children[0].innerText === 'B',
347 |         'el#d1[1][0] innerText is B'
348 |       );
349 |       test(
350 |         d1.children[1].children[1].innerText === '2',
351 |         'el#d1[1][1] innerText is 1'
352 |       );
353 |       data.users = [];
354 |     </script>
355 | 
356 |     <template name="inv-item">
357 |       <p>
358 |         <slot name="name"></slot>
359 |       </p>
360 |     </template>
361 | 
362 |     <script>
363 |       sb.register();
364 |     </script>
365 | 
366 |     <div id="inv-items">
367 |       <inv-item sb-mark="items.#">
368 |         <span slot="name" sb-mark="items.#.name"></span>
369 |       </inv-item>
370 |     </div>
371 | 
372 |     <script>
373 |       const items = document.getElementById('inv-items');
374 |       data.qtys = {};
375 | 
376 |       data.items = () =>
377 |         Object.keys(data.qtys).map((name) => ({
378 |           name,
379 |           quantity: data.qtys[name],
380 |         }));
381 | 
382 |       test(items.children.length === 1, 'el#inv-items has one child');
383 |       data.qtys['item'] = 0;
384 | 
385 |       test(items.children.length === 2, 'el#inv-items has 1 child');
386 |       test(
387 |         items.children[0].innerText === 'item',
388 |         'el#inv-items has correct innerText'
389 |       );
390 |     </script>
391 |   </body>
392 | </html>
393 | 


--------------------------------------------------------------------------------
/tests/test.js:
--------------------------------------------------------------------------------
 1 | let i = 0;
 2 | let success = 0;
 3 | let failure = 0;
 4 | 
 5 | function test(truthy, message) {
 6 |   const idx = String(i).padStart(3, '0');
 7 |   if (truthy) {
 8 |     console.log(`🟢 ${idx} - ${message}`);
 9 |     success += 1;
10 |     update('success', success);
11 |   } else {
12 |     console.error(`🔴 ${idx} - ${message}`);
13 |     failure += 1;
14 |     update('failure', failure);
15 |   }
16 | 
17 |   update('total', success + failure);
18 |   i += 1;
19 | }
20 | 
21 | function update(id, value) {
22 |   const el = document.getElementById(id);
23 |   if (el) {
24 |     el.innerText = value;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/tests/test.loops.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>Sb Test - Loops</title>
  8 |     <script src="../index.js"></script>
  9 |     <link rel="stylesheet" href="test.css" />
 10 |     <script src="./test.js"></script>
 11 |   </head>
 12 |   <body>
 13 |     <main>
 14 |       <h1>Loop Tests</h1>
 15 |       <div>
 16 |         <p>Success: <span id="success">0</span></p>
 17 |         <p>Failure: <span id="failure">0</span></p>
 18 |         <p>Total: <span id="total">0</span></p>
 19 |       </div>
 20 |     </main>
 21 |     <script>
 22 |       const data = sb.init();
 23 |     </script>
 24 | 
 25 |     <!-- List of Primitives -->
 26 |     <ul id="ul1">
 27 |       <li sb-mark="one.#">placeholder</li>
 28 |     </ul>
 29 |     <script>
 30 |       const ul1 = document.getElementById('ul1');
 31 |       test(
 32 |         ul1.children[0] instanceof HTMLLIElement,
 33 |         'ul has placeholder li element'
 34 |       );
 35 | 
 36 |       data.one = [];
 37 |       test(
 38 |         ul1.children[0] instanceof HTMLTemplateElement,
 39 |         'ul placeholder in template'
 40 |       );
 41 | 
 42 |       data.one.push('one');
 43 |       test(
 44 |         ul1.children[0] instanceof HTMLLIElement,
 45 |         'ul[0] is an li element (no for)'
 46 |       );
 47 |       test(
 48 |         ul1.children[0].innerText === 'one',
 49 |         `ul[0] innerText is "one" (no for)`
 50 |       );
 51 | 
 52 |       data.one.push('two', 'three', 'four');
 53 |       test(data.one.length === 4, 'one has 4 items');
 54 |       test(
 55 |         ul1.childElementCount === data.one.length + 1,
 56 |         'ul has one additional element for placeholder'
 57 |       );
 58 | 
 59 |       for (const idx in data.one) {
 60 |         test(
 61 |           ul1.children[idx] instanceof HTMLLIElement,
 62 |           `ul[${idx}] is an li element`
 63 |         );
 64 |         test(
 65 |           ul1.children[idx].innerText === data.one[idx],
 66 |           `ul[${idx}] innerText is "${data.one[idx]}"`
 67 |         );
 68 |       }
 69 | 
 70 |       data.one.pop();
 71 |       test(
 72 |         ul1.lastElementChild.previousElementSibling.innerText === 'three',
 73 |         'last element "three" after pop'
 74 |       );
 75 | 
 76 |       data.one.push('four');
 77 |       test(
 78 |         ul1.lastElementChild.previousElementSibling.innerText === 'four',
 79 |         'last element "four" after push'
 80 |       );
 81 | 
 82 |       data.one.shift();
 83 |       test(
 84 |         ul1.firstElementChild.innerText === 'two',
 85 |         'first element "two" after shift'
 86 |       );
 87 | 
 88 |       data.one.unshift('one');
 89 |       test(
 90 |         ul1.firstElementChild.innerText === 'one',
 91 |         'first element "one" after unshift'
 92 |       );
 93 | 
 94 |       data.one.splice(1, 2, '1', '2');
 95 |       test(
 96 |         ul1.children[1].innerText === '1',
 97 |         'ul[1] innerText "1" after splice'
 98 |       );
 99 |       test(
100 |         ul1.children[2].innerText === '2',
101 |         'ul[2] innerText "2" after splice'
102 |       );
103 |       test(
104 |         ul1.childElementCount === 5,
105 |         '5 children after splice delete 2 add 2'
106 |       );
107 | 
108 |       data.one[0] = '0';
109 |       test(ul1.children[0].innerText === '0', 'ul[0] innerText "0" after set');
110 | 
111 |       data.one[3] = '3';
112 |       test(ul1.children[3].innerText === '3', 'ul[0] innerText "0" after set');
113 | 
114 |       data.one = [];
115 |       test(ul1.childElementCount === 1, '1 child after empty list set');
116 |     </script>
117 | 
118 |     <!-- List of Objects -->
119 |     <ul id="ul2">
120 |       <li sb-mark="two.#">
121 |         <span sb-mark="two.#.a"></span>
122 |         <span sb-mark="two.#.b"></span>
123 |       </li>
124 |     </ul>
125 | 
126 |     <script>
127 |       const ul2 = document.getElementById('ul2');
128 |       test(
129 |         ul2.children[0] instanceof HTMLLIElement,
130 |         'ul2 has placeholder li element'
131 |       );
132 |       test(ul2.children[0].childElementCount === 2, 'ul2 li has 2 children');
133 | 
134 |       data.two = [];
135 |       test(
136 |         ul2.children[0] instanceof HTMLTemplateElement,
137 |         'u2 placeholder in template'
138 |       );
139 | 
140 |       data.two.push({ a: '0.a', b: '0.b' });
141 |       test(
142 |         ul2.children[0]?.children[0].innerText === '0.a',
143 |         'ul[0][0] innerText is "0.a"'
144 |       );
145 | 
146 |       data.two.push(
147 |         { a: '1.a', b: '1.b' },
148 |         { a: '2.a', b: '2.b' },
149 |         { a: '3.a', b: '3.b' }
150 |       );
151 | 
152 |       test(data.two.length === 4, 'two has 4 items');
153 |       test(
154 |         ul2.childElementCount === data.two.length + 1,
155 |         'ul has one additional element for placeholder'
156 |       );
157 | 
158 |       for (const idx in data.two) {
159 |         test(
160 |           ul2.children[idx].children[0].innerText === `${idx}.a`,
161 |           `ul[${idx}][0] innerText is "${idx}.a"`
162 |         );
163 |         test(
164 |           ul2.children[idx].children[1].innerText === `${idx}.b`,
165 |           `ul[${idx}][1] innerText is "${idx}.b"`
166 |         );
167 |       }
168 | 
169 |       data.two.pop();
170 |       test(
171 |         ul2.lastElementChild.previousElementSibling.firstElementChild
172 |           .innerText === '2.a',
173 |         'last element first child "2.a" after pop'
174 |       );
175 | 
176 |       data.two.push({ a: '3.a', b: '3.b' });
177 |       test(
178 |         ul2.lastElementChild.previousElementSibling.firstElementChild
179 |           .innerText === '3.a',
180 |         'last element first child "3.a" after push'
181 |       );
182 | 
183 |       data.two.shift();
184 |       test(
185 |         ul2.firstElementChild.firstElementChild.innerText === '1.a',
186 |         'first element first child "1.a" after shift'
187 |       );
188 | 
189 |       data.two.unshift({ a: '0.a', b: '0.b' });
190 |       test(
191 |         ul2.firstElementChild.firstElementChild.innerText === '0.a',
192 |         'first element first child "0.a" after unshift'
193 |       );
194 | 
195 |       data.two.splice(1, 2, { a: 'x', b: 'y' });
196 |       test(
197 |         ul2.children[1].firstElementChild.innerText === 'x',
198 |         'ul2[1][0] innerText "x" after splice'
199 |       );
200 |       test(
201 |         ul2.children[2].firstElementChild.innerText === '3.a',
202 |         'ul[2][0] innerText "3.a" after splice'
203 |       );
204 |       test(
205 |         ul2.childElementCount === 4,
206 |         '5 children after splice delete 2 add 1'
207 |       );
208 | 
209 |       data.two[0].a = '0';
210 |       test(
211 |         ul2.children[0].firstElementChild.innerText === '0',
212 |         'ul[0][0] innerText "0" after set'
213 |       );
214 |       test(
215 |         ul2.children[0].children[1].innerText === '0.b',
216 |         'ul[0][1] innerText remains "0.b" after set'
217 |       );
218 | 
219 |       data.two[0].b = '0';
220 |       test(
221 |         ul2.children[0].firstElementChild.innerText === '0',
222 |         'ul[0][0] innerText "0" after set'
223 |       );
224 |       test(
225 |         ul2.children[0].children[1].innerText === '0',
226 |         'ul[0][1] innerText "0.b" after set'
227 |       );
228 | 
229 |       data.two = [];
230 |       test(ul2.childElementCount === 1, '1 child after empty list set');
231 |     </script>
232 | 
233 |     <!-- List of Lists -->
234 |     <div id="div1">
235 |       <p sb-mark="three.#">
236 |         <span sb-mark="three.#.#">placeholder</span>
237 |       </p>
238 |     </div>
239 | 
240 |     <script>
241 |       data.three = [];
242 |       data.three.push([]);
243 |       data.three[0].push(1, 2, 3, 4);
244 | 
245 |       data.three.push([]);
246 |       data.three[1].push('a', 'b', 'c', 'd');
247 | 
248 |       const div1 = document.getElementById('div1');
249 |       test(div1.childElementCount === 3, 'div1 has 3 children');
250 |       for (let i in data.three) {
251 |         for (let j in data.three[i]) {
252 |           test(
253 |             div1.children[i].children[j].innerText === String(data.three[i][j]),
254 |             `div1[${i}][${j}] is ${data.three[i][j]}`
255 |           );
256 |         }
257 |       }
258 | 
259 |       data.three[0].pop();
260 |       test(
261 |         div1.children[0].childElementCount === 4,
262 |         'div1[0] has 4 children after pop'
263 |       );
264 |       test(
265 |         div1.children[1].childElementCount === 5,
266 |         'div1[0] still has 5 children'
267 |       );
268 | 
269 |       data.three[1] = [];
270 |       test(
271 |         div1.children[1].childElementCount === 1,
272 |         'div1[0] has 1 child after empty list set'
273 |       );
274 | 
275 |       data.three.shift();
276 |       test(div1.childElementCount === 2, 'div1[0] has 2 children after shift');
277 | 
278 |       data.three.pop();
279 |       test(div1.childElementCount === 1, 'div1[0] has 1 child after pop');
280 |     </script>
281 |   </body>
282 | </html>
283 | 


--------------------------------------------------------------------------------
/tests/test.templates.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Sb Test - Templates</title>
 8 |     <script src="../index.js"></script>
 9 |     <link rel="stylesheet" href="test.css" />
10 |     <script src="./test.js"></script>
11 |     <script type="module">
12 |       const data = sb.init();
13 |       await sb.load('./templates.html');
14 | 
15 |       test(customElements.get('red-p'), 'external red-p is defined');
16 |       test(customElements.get('green-p'), 'external green-p is defined');
17 |     </script>
18 |   </head>
19 |   <body>
20 |     <main>
21 |       <h1>Template Tests</h1>
22 |       <div>
23 |         <p>Success: <span id="success">0</span></p>
24 |         <p>Failure: <span id="failure">0</span></p>
25 |         <p>Total: <span id="total">0</span></p>
26 |       </div>
27 |     </main>
28 |     <red-p>Red</red-p>
29 |     <green-p>Green</green-p>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Language and Environment */
 4 |     "target": "es2020",
 5 |     "module": "ES2020",
 6 |     "allowJs": false,
 7 | 
 8 |     /* Emit */
 9 |     "removeComments": true,
10 |     "noEmit": true,
11 |     "forceConsistentCasingInFileNames": true,
12 | 
13 |     /* Type Checking */
14 |     "strict": true,
15 |     "noImplicitAny": true,
16 |     "strictNullChecks": true,
17 |     "strictFunctionTypes": true,
18 |     "strictBindCallApply": true,
19 |     "strictPropertyInitialization": true,
20 |     "noImplicitThis": true,
21 |     "useUnknownInCatchVariables": true,
22 |     "alwaysStrict": true,
23 |     "noUnusedLocals": true,
24 |     "noUnusedParameters": true,
25 |     "exactOptionalPropertyTypes": true,
26 |     "noImplicitReturns": true,
27 |     "noFallthroughCasesInSwitch": true,
28 |     "noUncheckedIndexedAccess": true,
29 |     "noImplicitOverride": true,
30 |     "noPropertyAccessFromIndexSignature": true,
31 |     "allowUnusedLabels": false,
32 |     "allowUnreachableCode": false
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/website/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/banner.png


--------------------------------------------------------------------------------
/website/assets/fonts/press-start-2p-latin-ext.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/fonts/press-start-2p-latin-ext.woff2


--------------------------------------------------------------------------------
/website/assets/fonts/press-start-2p-latin.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/fonts/press-start-2p-latin.woff2


--------------------------------------------------------------------------------
/website/assets/fonts/vt323-latin-ext.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/fonts/vt323-latin-ext.woff2


--------------------------------------------------------------------------------
/website/assets/fonts/vt323-latin.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/fonts/vt323-latin.woff2


--------------------------------------------------------------------------------
/website/assets/grid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M24 0H0V24H24V0ZM23 1H1V23H23V1Z" fill="hsla(6, 64%, 59%, 0.07)"/>
3 | </svg>


--------------------------------------------------------------------------------
/website/assets/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/heart.png


--------------------------------------------------------------------------------
/website/assets/index.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   /* Whites (yellow) */
  3 |   --white-light: hsla(43, 48%, 95%, 1);
  4 |   --white: hsla(43, 68%, 92%, 1);
  5 |   --white-dark: hsla(43, 78%, 72%, 1);
  6 | 
  7 |   --gray-lighter: hsla(43, 10%, 75%, 0.35);
  8 |   --gray-light: hsla(43, 10%, 75%, 1);
  9 |   --gray: hsla(240, 4%, 50%, 1);
 10 |   --black: #342f3a;
 11 |   /* Browns */
 12 |   --brown-light: hsla(32, 46%, 60%, 1);
 13 |   --brown: hsla(25, 37%, 37%, 1);
 14 |   --brown-dark: hsla(17, 48%, 16%, 1);
 15 |   /* Reds */
 16 |   --red-light: hsla(6, 64%, 79%, 1);
 17 |   --red: hsla(6, 64%, 59%, 1);
 18 |   --red-dark: hsla(6, 44%, 49%, 1);
 19 |   /* Other */
 20 |   --green: hsla(69, 44%, 56%, 1);
 21 |   --blue: hsla(210, 44%, 46%, 1);
 22 |   --blue-dark: hsla(210, 74%, 36%, 1);
 23 | 
 24 |   --border: 2px solid var(--brown-dark);
 25 |   --shadow: -4px 4px 0px hsla(25, 37%, 47%, 0.35);
 26 |   --text-shadow: -2px 2px 0px rgba(0, 0, 0, 1);
 27 | 
 28 |   /* Inventory Example Vars */
 29 |   --block-width: 100%;
 30 |   --block-height: 400px;
 31 | }
 32 | 
 33 | /* 
 34 |  * Block Component Definition
 35 |  */
 36 | 
 37 | .block {
 38 |   border: var(--border);
 39 |   box-shadow: var(--shadow);
 40 |   background-color: var(--white);
 41 | }
 42 | 
 43 | .block > h2 {
 44 |   font-size: 0.85rem;
 45 |   border-bottom: var(--border);
 46 |   padding: 0.25rem;
 47 |   margin: 0;
 48 |   color: var(--white-light);
 49 |   text-shadow: var(--text-shadow);
 50 |   background-color: var(--red);
 51 | }
 52 | 
 53 | .block > h3 {
 54 |   color: var(--gray);
 55 |   text-decoration: underline;
 56 |   font-weight: bold;
 57 |   padding: 0.5rem 0.25rem 0.25rem 0.25rem;
 58 |   margin: 0;
 59 | }
 60 | 
 61 | .blank-block > p,
 62 | .block > p {
 63 |   margin: 0;
 64 |   margin-bottom: 1rem;
 65 | }
 66 | 
 67 | .block > p {
 68 |   padding: 0.25rem 0.25rem;
 69 | }
 70 | 
 71 | .blank-block > blockquote,
 72 | .block > blockquote {
 73 |   display: block;
 74 |   font-style: normal;
 75 |   width: fit-content;
 76 |   padding: 0rem 0.25rem;
 77 |   margin: 1rem 0.25rem;
 78 |   color: var(--gray);
 79 |   border-left: 2px solid var(--gray);
 80 |   background-color: var(--gray-lighter);
 81 |   box-sizing: border-box;
 82 | }
 83 | 
 84 | .blank-block > blockquote {
 85 |   margin: 1rem 0rem;
 86 |   width: calc(100%);
 87 | }
 88 | 
 89 | .block > pre code.hljs {
 90 |   margin: 0.25rem;
 91 |   box-shadow: none;
 92 | }
 93 | 
 94 | .blank-block > p:last-child,
 95 | .block > p:last-child {
 96 |   margin-bottom: 0rem;
 97 | }
 98 | 
 99 | #leadin > p,
100 | #simple-example {
101 |   margin: 0;
102 | }
103 | 
104 | /* 
105 |  * Navbar definition
106 |  */
107 | 
108 | .navbar {
109 |   align-items: center;
110 |   justify-content: center;
111 |   display: flex;
112 |   flex-wrap: wrap;
113 |   gap: 1rem;
114 | }
115 | 
116 | .navbar > a {
117 |   min-width: 4rem;
118 |   text-align: center;
119 |   white-space: nowrap;
120 |   text-decoration: none;
121 |   color: var(--brown-dark);
122 |   padding: 0.125rem 0.5rem;
123 |   margin: 0;
124 |   background-color: var(--green);
125 | 
126 |   border: var(--border);
127 |   box-shadow: var(--shadow);
128 | }
129 | 
130 | .navbar > a:link,
131 | .navbar > a:visited {
132 |   color: var(--brown-dark);
133 | }
134 | 
135 | .copy {
136 |   position: relative;
137 |   display: inline-block;
138 |   cursor: pointer;
139 | }
140 | 
141 | .copy:hover::before {
142 |   content: attr(data-copy);
143 |   position: absolute;
144 |   top: 0;
145 |   right: 0;
146 |   padding: 0.125rem 0.5rem;
147 |   background-color: var(--green);
148 |   color: var(--black);
149 |   z-index: 1;
150 |   box-shadow: var(--shadow);
151 | }
152 | 
153 | .sb-break {
154 |   display: flex;
155 |   align-items: center;
156 |   margin: 2rem 0rem;
157 | }
158 | 
159 | .sb-break > hr {
160 |   width: 100%;
161 |   border-style: solid;
162 |   /* border-width: 2px; */
163 |   border-color: var(--red-light);
164 | }
165 | 
166 | .sb-break > img {
167 |   margin: 0 1rem;
168 |   width: 2rem;
169 |   height: 2rem;
170 | }
171 | 
172 | /* 
173 |  * Default Style Overrides
174 |  */
175 | 
176 | html {
177 |   background: var(--white-light);
178 |   background-image: url('grid.svg');
179 |   background-attachment: fixed;
180 | }
181 | 
182 | h1,
183 | h2 {
184 |   font-family: 'Press Start 2P', monospace;
185 | }
186 | 
187 | h3,
188 | p,
189 | a,
190 | li,
191 | code,
192 | textarea,
193 | blockquote {
194 |   font-family: 'VT323', monospace;
195 |   font-size: 22px;
196 | }
197 | 
198 | li {
199 |   margin-bottom: 0.5rem;
200 |   list-style-type: square;
201 | }
202 | 
203 | li > b {
204 |   font-weight: normal;
205 |   margin: 0 -0.25rem;
206 |   padding: 0 0.25rem;
207 |   background-color: hsla(69, 54%, 66%, 0.5);
208 | }
209 | 
210 | li:last-child {
211 |   margin-bottom: 0;
212 | }
213 | 
214 | em {
215 |   font-style: normal;
216 |   margin: 0 -0.25rem;
217 |   padding: 0 0.25rem;
218 |   background-color: var(--gray-lighter);
219 | }
220 | 
221 | p > code {
222 |   color: var(--gray);
223 |   margin: 0 -0.25rem;
224 |   padding: 0 0.25rem;
225 | }
226 | 
227 | p > br {
228 |   content: ' ';
229 |   display: block;
230 |   margin: 1rem 0;
231 | }
232 | 
233 | a {
234 |   color: var(--blue);
235 | }
236 | 
237 | a:link {
238 |   color: var(--blue);
239 | }
240 | 
241 | a:visited {
242 |   color: var(--blue-dark);
243 | }
244 | 
245 | body {
246 |   margin: 2rem;
247 |   display: flex;
248 |   flex-direction: column;
249 |   gap: 2.5rem;
250 | 
251 |   height: 100vh;
252 |   height: var(--vh);
253 |   max-width: calc(820px - 4rem);
254 | }
255 | 
256 | header > * {
257 |   margin: 0rem;
258 |   display: grid;
259 |   place-items: center;
260 | }
261 | 
262 | header > a > div {
263 |   width: calc(100% + 1rem);
264 |   margin-left: -1rem;
265 |   height: 64px;
266 |   background-size: 64px;
267 |   /* base64 sb.png cause sb.png gets queued */
268 |   background: transparent
269 |     url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAhZJREFUeF7tmjFLA0EUhI0/QBArLezEn6Eg2NoINrERtBNBsbFKZRMUxE7BRhvBxlYI6M8QOwutRPAHqPUbwg6Pt3vk9iZd2Nvs3WS+2bcv6U0Vfj0+b/+llthYve0VvoXkxxdfXALIAZUj4LX44cmayYSV9QXDKMsE73osX8IZ4L0hCSAHVIYAMsYs/vL0kcQSMwEvxvnnp6MQxqHJ455EAhDG5YDaEWCZwPZlzIDczOP62TNAAoACGIpyAFGg9Qi87mwmz//MAd7x5ZuHEMahyeNuVgLIAR1DAC0/PzhLYvw5OEqOH3/9mPHh3Ix5//Ztx5dm7bg3E8IZIAGAeTmgdgSY5fv7u4bZ+wPL/PvdtXerN9djRuxN24/zZoI7AyQAYV4O6BoCi33LPAKOzLN9ngUE1gF4feMZIAHkACFgMIzu88g0Y/7q187AswM7G4TrAMwACRCs9OQAUKB1CGxd2H4AMsn2eRz31v44v/EMkAByQMcRYGcBlgEs9Nj8iT8LsAeQAND1ZYK17jTIHmjiHYAPgC0yLI292yIKgLV+tAeI9+8+C0gAUEAOgCZp5xFARFCQ0WX6t0MWktHUL54BEgAUkAOgaVodAmxbZB0e7z7vPe+zTAnXARKA1AVyAOnxVYdAFInc+3zjGSABgpkgB4AC3hYXs3z2Uti7oPevtKyv711fAoAC2Qsh9o3IAc4/U5dG4B94vkxfngE+mwAAAABJRU5ErkJggg==')
270 |     space 0 0;
271 | }
272 | 
273 | header > h1 {
274 |   margin-top: 2rem;
275 |   font-size: 4.5rem;
276 |   color: var(--black);
277 |   text-shadow: -2px 2px 0px var(--red), -4px 4px 0px var(--red-dark);
278 |   margin-bottom: 0.5rem;
279 | }
280 | 
281 | header > p {
282 |   color: var(--red-dark);
283 |   font-size: 1.75rem;
284 | }
285 | 
286 | footer {
287 |   margin-top: 3rem;
288 |   display: flex;
289 |   flex-direction: column;
290 |   align-items: center;
291 | }
292 | 
293 | footer > p {
294 |   margin: 0;
295 | }
296 | 
297 | @media screen and (min-width: 820px) {
298 |   body {
299 |     margin: 2rem auto;
300 |   }
301 | }
302 | 
303 | @media screen and (max-width: 820px) {
304 |   header > h1 {
305 |     font-size: 3.5rem;
306 |   }
307 | 
308 |   header > p {
309 |     font-size: 1.5rem;
310 |   }
311 | }
312 | 
313 | @media screen and (max-width: 625px) {
314 |   body {
315 |     margin: 1rem;
316 |   }
317 | 
318 |   header > h1 {
319 |     margin-top: 1rem;
320 |     font-size: 3rem;
321 |   }
322 | }
323 | 
324 | @media screen and (max-width: 510px) {
325 |   header > h1 {
326 |     font-size: 2.5rem;
327 |   }
328 | }
329 | 
330 | @media screen and (max-width: 420px) {
331 |   header > h1 {
332 |     font-size: 2rem;
333 |   }
334 | }
335 | 
336 | @media screen and (max-width: 350px) {
337 |   header > h1 {
338 |     font-size: 1.5rem;
339 |   }
340 | }
341 | 
342 | /*
343 | Styling for the Inventory example block.
344 | */
345 | 
346 | .toggle {
347 |   border: var(--border);
348 |   box-shadow: var(--shadow);
349 | }
350 | 
351 | .screen {
352 |   width: 100%;
353 |   height: var(--block-height);
354 | }
355 | 
356 | #buttons {
357 |   display: flex;
358 |   flex-direction: row;
359 |   justify-content: space-between;
360 |   background-color: var(--white);
361 |   font-size: 18px;
362 |   border-top: var(--border);
363 | 
364 |   font-size: 0;
365 |   padding: 4px;
366 | }
367 | 
368 | #buttons button {
369 |   cursor: pointer;
370 |   margin: 0;
371 |   padding: 0 4px;
372 |   border-radius: 0;
373 |   border-color: hsla(43, 68%, 96%, 1);
374 | 
375 |   font-family: 'VT323', monospace;
376 |   font-size: 18px;
377 | 
378 |   color: var(--brown-dark);
379 |   background-color: var(--white);
380 | }
381 | 
382 | #buttons button[data-active='true'] {
383 |   border-color: hsla(69, 54%, 90%, 1);
384 |   background-color: hsla(69, 54%, 66%, 1);
385 | }
386 | 
387 | button#reset {
388 |   border-color: hsla(6, 64%, 90%, 1);
389 |   background-color: hsla(6, 70%, 76%, 1);
390 | }
391 | 
392 | .codeblock {
393 |   width: var(--block-width);
394 |   height: var(--block-height);
395 | }
396 | 
397 | .codeblock > pre {
398 |   width: 100%;
399 |   height: 100%;
400 | 
401 |   margin: 0;
402 |   border: none;
403 |   overflow: auto;
404 | }
405 | 
406 | .codeblock code {
407 |   border: none !important;
408 | }
409 | 
410 | .codeblock > textarea {
411 |   width: 100%;
412 |   height: 100%;
413 | 
414 |   white-space: pre;
415 |   overflow-wrap: normal;
416 |   overflow: auto;
417 |   box-sizing: border-box;
418 | 
419 |   padding: 1rem;
420 |   color: var(--gray-light);
421 |   background: var(--black);
422 | 
423 |   border: none;
424 |   outline: none;
425 |   resize: none;
426 | }
427 | 
428 | #view {
429 |   overflow-x: auto;
430 |   overflow-y: hidden;
431 | }
432 | 
433 | .codeblock > iframe {
434 |   min-width: calc(400px + 2rem);
435 |   width: 100%;
436 |   height: 100%;
437 |   border: none;
438 | }
439 | 
440 | /*
441 |  * Highlight JS Styles
442 |  */
443 | 
444 | pre code.hljs {
445 |   display: block;
446 |   overflow-x: auto;
447 |   padding: 1rem;
448 | 
449 |   border: var(--border);
450 |   box-shadow: var(--shadow);
451 |   margin: 0;
452 | }
453 | 
454 | code.hljs {
455 |   padding: 3px 5px;
456 | }
457 | 
458 | .hljs {
459 |   color: var(--gray-light);
460 |   background: var(--black);
461 | }
462 | 
463 | .hljs-comment,
464 | .hljs-quote {
465 |   color: var(--gray);
466 | }
467 | 
468 | .hljs-deletion,
469 | .hljs-name,
470 | .hljs-section,
471 | .hljs-selector-tag,
472 | .hljs-subst {
473 |   color: var(--red);
474 | }
475 | 
476 | .hljs-addition,
477 | .hljs-attribute,
478 | .hljs-meta .hljs-string,
479 | .hljs-regexp,
480 | .hljs-string {
481 |   color: var(--green);
482 | }
483 | 
484 | .hljs-attr,
485 | .hljs-number,
486 | .hljs-selector-attr,
487 | .hljs-selector-class,
488 | .hljs-selector-pseudo,
489 | .hljs-template-variable,
490 | .hljs-type,
491 | .hljs-variable,
492 | .hljs-keyword {
493 |   color: var(--brown-light);
494 | }
495 | 
496 | .hljs-bullet,
497 | .hljs-link,
498 | .hljs-meta,
499 | .hljs-selector-id,
500 | .hljs-symbol,
501 | .hljs-title,
502 | .hljs-property {
503 |   color: var(--white-dark);
504 | }
505 | 
506 | /*
507 |  * Font Loading
508 |  */
509 | 
510 | /* latin-ext */
511 | @font-face {
512 |   font-family: 'Press Start 2P';
513 |   font-style: normal;
514 |   font-weight: 400;
515 |   font-display: swap;
516 |   src: url('./fonts/press-start-2p-latin-ext.woff2') format('woff2');
517 |   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
518 |     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
519 | }
520 | 
521 | /* latin */
522 | @font-face {
523 |   font-family: 'Press Start 2P';
524 |   font-style: normal;
525 |   font-weight: 400;
526 |   font-display: swap;
527 |   src: url('./fonts/press-start-2p-latin.woff2') format('woff2');
528 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
529 |     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
530 |     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
531 | }
532 | 
533 | /* latin-ext */
534 | @font-face {
535 |   font-family: 'VT323';
536 |   font-style: normal;
537 |   font-weight: 400;
538 |   font-display: swap;
539 |   src: url('./fonts/vt323-latin-ext.woff2') format('woff2');
540 |   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
541 |     U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
542 | }
543 | 
544 | /* latin */
545 | @font-face {
546 |   font-family: 'VT323';
547 |   font-style: normal;
548 |   font-weight: 400;
549 |   font-display: swap;
550 |   src: url('./fonts/vt323-latin.woff2') format('woff2');
551 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
552 |     U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
553 |     U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
554 | }
555 | 


--------------------------------------------------------------------------------
/website/assets/noise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/noise.png


--------------------------------------------------------------------------------
/website/assets/sb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/18alantom/strawberry/488c9ba5d1b2a32d7d991f5d7454f9337e141df4/website/assets/sb.png


--------------------------------------------------------------------------------
/website/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <meta name="color-scheme" content="normal" />
  8 |     <meta name="theme-color" content="#342f3a" />
  9 | 
 10 |     <!-- Regular Meta Tags -->
 11 |     <meta
 12 |       name="name"
 13 |       content="Strawberry - Zero-Dependency, Build-Free JavaScript Framework"
 14 |     />
 15 |     <meta
 16 |       name="title"
 17 |       content="Strawberry - Zero-Dependency, Build-Free JavaScript Framework"
 18 |     />
 19 |     <meta
 20 |       name="description"
 21 |       content="Zero-dependency, build-free JavaScript framework for the artisanal web."
 22 |     />
 23 |     <meta name="image" content="https://18alan.space/strawberry/assets/banner.png" />
 24 |     <meta name="language" content="en-US" />
 25 | 
 26 |     <!-- OG Meta Tags -->
 27 |     <meta
 28 |       property="og:title"
 29 |       content="Strawberry - Zero-Dependency, Build-Free JavaScript Framework"
 30 |     />
 31 |     <meta
 32 |       property="og:description"
 33 |       content="Zero-dependency, build-free JavaScript framework for the artisanal web."
 34 |     />
 35 |     <meta
 36 |       property="og:image"
 37 |       content="https://18alan.space/strawberry/assets/banner.png"
 38 |     />
 39 | 
 40 |     <!-- Twitter Meta Tags -->
 41 |     <meta
 42 |       name="twitter:title"
 43 |       content="Strawberry - Zero-Dependency, Build-Free JavaScript Framework"
 44 |     />
 45 |     <meta
 46 |       name="twitter:description"
 47 |       content="Zero-dependency, build-free JavaScript framework for the artisanal web."
 48 |     />
 49 |     <meta
 50 |       name="twitter:image"
 51 |       content="https://18alan.space/strawberry/assets/banner.png"
 52 |     />
 53 |     <meta name="twitter:site" content="@18alantom" />
 54 |     <meta name="twitter:card" content="summary_large_image" />
 55 | 
 56 |     <title>Strawberry - Zero-Dependency, Build-Free JavaScript Framework</title>
 57 |     <link rel="shortcut icon" href="assets/sb.png" />
 58 |     <link rel="stylesheet" href="assets/index.css" />
 59 | 
 60 |     <link
 61 |       rel="preload"
 62 |       as="font"
 63 |       type="font/woff2"
 64 |       href="assets/fonts/press-start-2p-latin.woff2"
 65 |       crossorigin
 66 |     />
 67 |     <link
 68 |       rel="preload"
 69 |       as="font"
 70 |       type="font/woff2"
 71 |       href="assets/fonts/vt323-latin.woff2"
 72 |       crossorigin
 73 |     />
 74 |     <link rel="preload" as="image" href="assets/sb.png" />
 75 |     <link
 76 |       rel="preload"
 77 |       as="image"
 78 |       type="image/svg+xml"
 79 |       href="assets/grid.svg"
 80 |     />
 81 | 
 82 |     <!-- Loading Highlight JS and Example Manager -->
 83 |     <script id="hl-script" src="highlight.min.js" async></script>
 84 |     <script src="index.js" async></script>
 85 |   </head>
 86 |   <body>
 87 |     <!-- Header -->
 88 |     <header>
 89 |       <a
 90 |         href="https://www.pixilart.com/art/strawberry-sr27182e5bff14b"
 91 |         target="_blank"
 92 |         rel="noreferrer"
 93 |       >
 94 |         <div id="banner"></div>
 95 |       </a>
 96 |       <h1>Strawberry</h1>
 97 |       <p>Zero-dependency, build-free framework for the artisanal web.</p>
 98 |     </header>
 99 | 
100 |     <!-- Lead-in Section -->
101 |     <section id="leadin">
102 |       <p>
103 |         Strawberry is a tiny frontend framework that gives you reactivity and
104 |         composability. It does this with zero-dependencies, without a build
105 |         step, and it fits in less than 4KB when gzipped.
106 |       </p>
107 |     </section>
108 | 
109 |     <pre
110 |       id="simple-example"
111 |     ><code class="copy hljs nohighlight" data-copy="Copy"><span class="hljs-comment">&lt;!-- Define Components --&gt;</span>
112 | <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"plum-p"</span>&gt;</span>
113 |   <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: plum"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">slot</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
114 | <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
115 | 
116 | <span class="hljs-comment">&lt;!-- Initialize Strawberry --&gt;</span>
117 | <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
118 |   <span class="hljs-keyword">const</span> data = sb.<span class="hljs-title function_">init</span>();
119 | </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
120 | 
121 | <span class="hljs-comment">&lt;!-- Use Components --&gt;</span>
122 | <span class="hljs-tag">&lt;<span class="hljs-name">plum-p</span> <span class="hljs-attr">sb-mark</span>=<span class="hljs-string">"message"</span>&gt;</span>
123 |   A plum colored p element!
124 | <span class="hljs-tag">&lt;/<span class="hljs-name">plum-p</span>&gt;</span>
125 | 
126 | <span class="hljs-comment">&lt;!-- Dynamically Update Components --&gt;</span>
127 | <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript">
128 |   data.<span class="hljs-property">message</span> = <span class="hljs-string">'Hello, World!'</span>;
129 | </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
130 | 
131 |     <!-- Nav Bar -->
132 |     <nav class="navbar">
133 |       <a
134 |         href="https://github.com/18alantom/strawberry"
135 |         target="_blank"
136 |         rel="noreferrer"
137 |         >Github</a
138 |       >
139 |       <a
140 |         href="https://github.com/18alantom/strawberry/tree/main/docs"
141 |         target="_blank"
142 |         rel="noreferrer"
143 |         >Docs</a
144 |       >
145 |     </nav>
146 | 
147 |     <section id="usecase" class="blank-block">
148 |       <p>
149 |         Strawberry is <em>not</em> an alternative to React, Vue, etc. It is an
150 |         alternative to Vanilla JS. It is meant for simple, long lasting, low
151 |         maintenance web pages, and <em>tiny</em> web apps.
152 |       </p>
153 |     </section>
154 | 
155 |     <!-- Basic Setup -->
156 |     <section id="setup" class="block">
157 |       <h2>Basic Setup</h2>
158 |       <p>For a basic setup, run this command in your terminal:</p>
159 |       <pre><code class="copy hljs nohighlight" data-copy="Copy"><span class="hljs-keyword">curl</span> <span class="hljs-property">-so-</span> https://raw.githubusercontent.com/18alantom/strawberry/main/setup.sh <span class="hljs-meta">|</span> <span class="hljs-keyword">bash</span></code></pre>
160 |       <p>
161 |         This will download and run a
162 |         <a
163 |           href="https://github.com/18alantom/strawberry/blob/main/setup.sh"
164 |           target="_blank"
165 |           rel="noreferrer"
166 |           >shell script</a
167 |         >
168 |         that creates a folder with two files, <code>index.html</code> and
169 |         <code>sb.min.js</code> which consists of a simple "Hello, World!"
170 |         program using Strawberry.
171 |       </p>
172 |       <p>
173 |         To verify that setup succeeded, run the created
174 |         <code>index.html</code> file and check the console for the
175 |         <code>window.sb</code> object.
176 |       </p>
177 |     </section>
178 | 
179 |     <section class="blank-block">
180 |       <p>
181 |         The ideal way of using Strawberry is by copying the source code into
182 |         your project directory as opposed to linking it.
183 |       </p>
184 |       <p>But if you want to use a link, you can :)</p>
185 |     </section>
186 | 
187 |     <!-- Setup -->
188 |     <section id="setup" class="block">
189 |       <h2>Link Setup</h2>
190 |       <p>
191 |         To use a link, copy and paste the following script tag at the top of
192 |         your <code>index.html</code>:
193 |       </p>
194 |       <pre><code class="copy hljs nohighlight" data-copy="Copy"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/sberry@0.0.3-alpha.0/dist/sb.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
195 |       <p>
196 |         Once that is done the <code>window.sb</code> object should be defined.
197 |       </p>
198 |     </section>
199 | 
200 |     <div class="sb-break" id="inventory-example">
201 |       <hr />
202 |       <img src="assets/sb.png" />
203 |       <hr />
204 |     </div>
205 | 
206 |     <section class="blank-block">
207 |       <p>
208 |         Here's a toy example using Strawberry. An inventory app in which you can
209 |         add items, move them in and out of a store, and view the movements.
210 |       </p>
211 |     </section>
212 | 
213 |     <!-- Inventory Example -->
214 |     <div class="toggle">
215 |       <div id="screen">
216 |         <!-- Display -->
217 |         <div id="view" class="codeblock" data-tab="view"></div>
218 |         <!-- Head Element Editor -->
219 |         <div class="codeblock" id="head" style="display: none" data-tab="head">
220 |           <pre><code style="cursor: pointer" class="language-html"></code></pre>
221 |           <textarea spellcheck="false" style="display: none"></textarea>
222 |         </div>
223 | 
224 |         <!-- Templates Editor -->
225 |         <div
226 |           class="codeblock"
227 |           id="templates"
228 |           style="display: none"
229 |           data-tab="templates"
230 |         >
231 |           <pre><code style="cursor: pointer" class="language-html"></code></pre>
232 |           <textarea spellcheck="false" style="display: none"></textarea>
233 |         </div>
234 | 
235 |         <!-- Body Element Editor -->
236 |         <div class="codeblock" id="body" style="display: none" data-tab="body">
237 |           <pre><code style="cursor: pointer" class="language-html"></code></pre>
238 |           <textarea spellcheck="false" style="display: none"></textarea>
239 |         </div>
240 | 
241 |         <!-- Script Element Editor -->
242 |         <div
243 |           class="codeblock"
244 |           id="script"
245 |           style="display: none"
246 |           data-tab="script"
247 |         >
248 |           <pre><code style="cursor: pointer; " class="language-javascript"></code></pre>
249 |           <textarea spellcheck="false" style="display: none"></textarea>
250 |         </div>
251 | 
252 |         <!-- Consolidated HTML Viewer -->
253 |         <div class="codeblock" id="html" style="display: none" data-tab="html">
254 |           <pre><code class="language-html"></code></pre>
255 |         </div>
256 |       </div>
257 | 
258 |       <div id="buttons">
259 |         <div id="tabs">
260 |           <button data-tab="view" data-active="true">View</button>
261 |           <button data-tab="head">Head</button>
262 |           <button data-tab="templates">Templates</button>
263 |           <button data-tab="body">Body</button>
264 |           <button data-tab="script">Script</button>
265 |           <button data-tab="html">HTML</button>
266 |         </div>
267 |         <button id="reset">Reset</button>
268 |       </div>
269 |     </div>
270 | 
271 |     <section class="blank-block">
272 |       <p>
273 |         Click the buttons in the bottom bar to view the different parts of the
274 |         page.
275 |       </p>
276 |       <ul>
277 |         <li><b>Head</b>: contains styles and a script to link Strawberry.</li>
278 |         <li>
279 |           <b>Templates</b>: contains templates for inventory list (blue) item
280 |           and movement item (dark-blue)
281 |         </li>
282 |         <li><b>Body</b>: contains the markup of the app.</li>
283 |         <li>
284 |           <b>Script</b>: contains Strawberry code, "business logic", click
285 |           handlers, and demo data.
286 |         </li>
287 |         <li>
288 |           <b>HTML</b>: contains HTML created by consolidating the other parts.
289 |           This is used to run the app (and is a readonly view).
290 |         </li>
291 |       </ul>
292 |       <p>
293 |         Clicking the code will allow you to edit it in a
294 |         <code>textarea</code>, switching back to "View" will allow you to see
295 |         your changes.
296 |       </p>
297 |     </section>
298 | 
299 |     <div class="sb-break">
300 |       <hr />
301 |       <img src="assets/sb.png" />
302 |       <hr />
303 |     </div>
304 | 
305 |     <!-- Why -->
306 |     <section id="why" class="blank-block">
307 |       <blockquote>Why did you make this?</blockquote>
308 |       <p>I wanted to write a simple website.</p>
309 |       <p>
310 |         I restrained myself from using the usual frontend frameworks; for my
311 |         purpose, their murder of dependencies felt like gross computational
312 |         opulence.
313 |       </p>
314 |       <p>
315 |         These previously, on annual re-visitation, instead of showing me my
316 |         website after an innocuous <code>yarn build</code>, have sprawled my
317 |         terminal with scary red text; portent of wasted hours.
318 |       </p>
319 |       <blockquote>If it ran then. It should've run now.</blockquote>
320 |       <p>
321 |         But as I wrote my website, the need to manually update the UI and
322 |         redefine components took away from writing the site.
323 |       </p>
324 |       <p>
325 |         And so it was created after an afternoon JavaScript experiment. A
326 |         framework for people who just want to write simple websites with a
327 |         smattering of JavaScript, and without having to <em>build</em> things
328 |         that probably might not.
329 |       </p>
330 |     </section>
331 | 
332 |     <!-- Quote Douglas Crockford -->
333 |     <section class="block">
334 |       <h2 style="background-color: var(--green)">
335 |         Douglas Crockford on the XML of today
336 |       </h2>
337 |       <p>
338 |         These are excerpts from the CoRecursive podcast on
339 |         <a
340 |           href="https://corecursive.com/json-vs-xml-douglas-crockford/"
341 |           target="_blank"
342 |           rel="noreferrer"
343 |           >JSON vs XML</a
344 |         >.
345 |       </p>
346 |       <blockquote>
347 |         It’s probably the JavaScript frameworks. They have gotten so big and so
348 |         weird. People seem to love them. I don’t understand why.
349 |       </blockquote>
350 |       <p>And on web APIs.</p>
351 |       <blockquote>
352 |         ...the browsers have actually gotten pretty good. The web standards
353 |         thing have finally worked, and the web API is stable pretty much. Some
354 |         of it’s still pretty stupid, but it works and it’s reliable.
355 |       </blockquote>
356 | 
357 |       <p>
358 |         Read the transcript on
359 |         <a
360 |           href="https://corecursive.com/json-vs-xml-douglas-crockford/#javascript-frameworks"
361 |           target="_blank"
362 |           rel="noreferrer"
363 |           >CoRecursive</a
364 |         >.
365 |       </p>
366 |     </section>
367 | 
368 |     <footer class="blank-block">
369 |       <p>
370 |         <a
371 |           href="https://18alan.space/posts/how-hard-is-it-to-build-a-frontend-framework.html"
372 |           target="_blank"
373 |           rel="noreferrer"
374 |           >How it works</a
375 |         >
376 |         ·
377 |         <a
378 |           href="https://github.com/18alantom/strawberry/blob/main/website/index.html"
379 |           target="_blank"
380 |           rel="noreferrer"
381 |           >Website code</a
382 |         >
383 |       </p>
384 |       <p>
385 |         Made with
386 |         <img
387 |           src="assets/heart.png"
388 |           style="width: 22px; height: 22px; margin-bottom: -5px"
389 |         />
390 |         by
391 |         <a href="https://twitter.com/18alantom" target="_blank" rel="noreferrer"
392 |           >Alan</a
393 |         >
394 |       </p>
395 |       <p>©2023</p>
396 |     </footer>
397 |   </body>
398 | </html>
399 | 


--------------------------------------------------------------------------------
/website/index.js:
--------------------------------------------------------------------------------
  1 | const splits = ['head', 'templates', 'body', 'script'];
  2 | const splitsEscaped = [
  3 |   'headEscaped',
  4 |   'templatesEscaped',
  5 |   'bodyEscaped',
  6 |   'scriptEscaped',
  7 | ];
  8 | 
  9 | class Manager {
 10 |   raw = '';
 11 |   containers = {
 12 |     view: null,
 13 |     head: null,
 14 |     templates: null,
 15 |     body: null,
 16 |     script: null,
 17 |     html: null,
 18 |   };
 19 |   displays = {
 20 |     head: null,
 21 |     templates: null,
 22 |     body: null,
 23 |     script: null,
 24 |     html: null,
 25 |   };
 26 |   editors = { head: null, templates: null, body: null, script: null };
 27 |   splits = { head: '', templates: '', body: '', script: '' };
 28 | 
 29 |   constructor() {
 30 |     return new Proxy(this, handler);
 31 |   }
 32 | 
 33 |   async load() {
 34 |     const resp = await fetch('./inventory.html');
 35 |     this.raw = await resp.text();
 36 |     this.setSplits();
 37 |     this.setRefs();
 38 |     this.setRefContents();
 39 |     this.setRefListeners();
 40 |     this.setView();
 41 |     highlight();
 42 |     centerView();
 43 |   }
 44 | 
 45 |   reset() {
 46 |     this.setSplits();
 47 |     this.setRefs();
 48 |     this.setRefContents();
 49 |     this.setView();
 50 |     highlight();
 51 |     centerView();
 52 |   }
 53 | 
 54 |   setRefs() {
 55 |     for (const id of splits) {
 56 |       const el = document.getElementById(id);
 57 |       this.containers[id] = el;
 58 |       this.displays[id] = el.getElementsByTagName('code')[0];
 59 |       this.editors[id] = el.getElementsByTagName('textarea')[0];
 60 |     }
 61 | 
 62 |     this.containers.view = document.getElementById('view');
 63 | 
 64 |     const el = document.getElementById('html');
 65 |     this.containers.html = el;
 66 |     this.displays.html = el.getElementsByTagName('code')[0];
 67 |   }
 68 | 
 69 |   setRefContents() {
 70 |     for (const id of splits) {
 71 |       this.editors[id].value = this[id];
 72 |       this.displays[id].innerHTML = this[`${id}Escaped`];
 73 |     }
 74 | 
 75 |     this.displays.html.innerHTML = this.htmlEscaped;
 76 |   }
 77 | 
 78 |   setRefListeners() {
 79 |     for (const id of splits) {
 80 |       this.editors[id].onblur = this.getBlurHandler(id);
 81 |       this.displays[id].onclick = this.getClickHandler(id);
 82 |     }
 83 | 
 84 |     const tabs = document.getElementById('tabs');
 85 |     for (const button of tabs.children) {
 86 |       button.onclick = this.toggleScreen.bind(this);
 87 |     }
 88 | 
 89 |     document.getElementById('reset').onclick = this.reset.bind(this);
 90 |   }
 91 | 
 92 |   getBlurHandler(id) {
 93 |     return () => {
 94 |       const value = this.editors[id].value;
 95 |       if (value !== this.splits[id]) {
 96 |         this.splits[id] = value;
 97 |         this.displays[id].innerHTML = this[`${id}Escaped`];
 98 |         this.displays.html.innerHTML = this.htmlEscaped;
 99 |         this.setView();
100 |         highlight();
101 |       }
102 | 
103 |       this.editors[id].style.display = 'none';
104 |       this.displays[id].parentElement.style.display = 'block';
105 |     };
106 |   }
107 | 
108 |   getClickHandler(id) {
109 |     return () => {
110 |       this.displays[id].parentElement.style.display = 'none';
111 |       this.editors[id].style.display = 'block';
112 |       setTimeout(() => this.editors[id].focus(), 50);
113 |     };
114 |   }
115 | 
116 |   setSplits() {
117 |     this.splits.head = this.getPart('HEAD_START', 'HEAD_END');
118 |     this.splits.templates = this.getPart('TEMPLATES_START', 'TEMPLATES_END');
119 |     this.splits.body = this.getPart('BODY_START', 'BODY_END');
120 |     this.splits.script = this.getPart('LOGIC_START', 'LOGIC_END');
121 |   }
122 | 
123 |   getPart(starttag, endtag) {
124 |     const splits = this.raw.split('\n');
125 |     const start = splits.findIndex((l) => l.includes(starttag));
126 |     const end = splits.findIndex((l) => l.includes(endtag));
127 |     return splits.slice(start + 1, end).join('\n');
128 |   }
129 | 
130 |   setView() {
131 |     for (const ch of this.containers.view.children) {
132 |       ch.remove();
133 |     }
134 | 
135 |     const ifr = document.createElement('iframe');
136 |     this.containers.view.appendChild(ifr);
137 |     ifr.src = 'about:blank';
138 |     ifr.contentWindow.document.open();
139 |     ifr.contentWindow.document.write(this.html);
140 |     ifr.contentWindow.document.close();
141 |   }
142 | 
143 |   toggleScreen(e) {
144 |     const tab = e.target.dataset.tab;
145 |     for (const key in this.containers) {
146 |       const el = this.containers[key];
147 |       if (key === tab) {
148 |         el.style.display = 'block';
149 |       } else {
150 |         el.style.display = 'none';
151 |       }
152 |     }
153 | 
154 |     const tabs = document.getElementById('tabs');
155 |     for (const button of tabs.children) {
156 |       button.setAttribute('data-active', 'false');
157 |     }
158 |     e.target.setAttribute('data-active', 'true');
159 |   }
160 | }
161 | 
162 | const handler = {
163 |   get(target, prop) {
164 |     if (typeof prop !== 'string') {
165 |       return Reflect.get(target, prop);
166 |     }
167 | 
168 |     if (prop === 'html') {
169 |       return html(target);
170 |     }
171 | 
172 |     if (prop === 'htmlEscaped') {
173 |       return escapeHTML(html(target));
174 |     }
175 | 
176 |     if (splits.includes(prop)) {
177 |       return Reflect.get(target, 'splits')[prop];
178 |     }
179 | 
180 |     if (splitsEscaped.includes(prop)) {
181 |       const newprop = prop.replace('Escaped', '');
182 |       return escapeHTML(Reflect.get(target, 'splits')[newprop]);
183 |     }
184 | 
185 |     return Reflect.get(target, prop);
186 |   },
187 | };
188 | 
189 | function html(target) {
190 |   const head = `  <head>\n${lpad(target.splits.head, '    ')}\n  </head>\n`;
191 |   const templates = lpad(target.splits.templates, '  ');
192 |   const body = `\n  <body>\n${lpad(target.splits.body, '    ')}\n  </body>\n`;
193 |   const script = `  <script>\n${lpad(
194 |     target.splits.script,
195 |     '    '
196 |   )}\n  </script>`;
197 | 
198 |   const contents = [head, templates, body, script].join('\n');
199 |   return `<html>\n${contents}\n</html>`;
200 | }
201 | 
202 | function lpad(str, pad = '  ', delim = '\n') {
203 |   return str
204 |     .split(delim)
205 |     .map((s) => `${pad}${s}`)
206 |     .join(delim);
207 | }
208 | 
209 | function escapeHTML(unsafe) {
210 |   return unsafe
211 |     .replace(/&/g, '&amp;')
212 |     .replace(/</g, '&lt;')
213 |     .replace(/>/g, '&gt;')
214 |     .replace(/"/g, '&quot;')
215 |     .replace(/'/g, '&#039;');
216 | }
217 | 
218 | function highlight(query) {
219 |   if (typeof query !== 'string' || !query) {
220 |     query = 'pre code';
221 |   }
222 | 
223 |   document.querySelectorAll(query).forEach((el) => {
224 |     hljs.highlightElement(el);
225 |   });
226 | }
227 | 
228 | function centerView() {
229 |   const view = document.getElementById('view');
230 |   const w1 = view.getBoundingClientRect().width;
231 |   const w2 = view.firstChild.getBoundingClientRect().width;
232 |   view.scroll((w2 - w1) / 2, 0);
233 | }
234 | 
235 | function setDataCopy() {
236 |   const key = 'data-copy';
237 |   const success = 'Copied :)';
238 |   for (const el of document.getElementsByClassName('copy')) {
239 |     el.addEventListener('click', (e) => {
240 |       navigator.clipboard.writeText(el.innerText);
241 | 
242 |       const c = el.getAttribute(key);
243 |       el.setAttribute(key, success);
244 |       if (c !== success) {
245 |         setTimeout(() => el.setAttribute('data-copy', c), 1000);
246 |       }
247 |     });
248 |   }
249 | }
250 | 
251 | document
252 |   .getElementById('hl-script')
253 |   .addEventListener('load', () => new Manager().load());
254 | setDataCopy();
255 | 


--------------------------------------------------------------------------------
/website/inventory.html:
--------------------------------------------------------------------------------
  1 | <!-- HEAD_START -->
  2 | <script src="sb.min.js"></script>
  3 | <style>
  4 |   :root {
  5 |     --color-0: plum;
  6 |     --color-1: #f79256;
  7 |     --color-2: #fbd1a2;
  8 |     --color-3: #7dcfb6;
  9 |     --color-4: #00b2ca;
 10 |     --color-5: #1d4e89;
 11 |   }
 12 | 
 13 |   body {
 14 |     font-family: Arial, Helvetica, sans-serif;
 15 |     background-color: var(--color-1);
 16 |     background-image: url('./assets/noise.png');
 17 | 
 18 |     overflow-y: hidden;
 19 |     height: 100vh;
 20 |     margin: 0;
 21 | 
 22 |     display: flex;
 23 |     justify-content: center;
 24 |     align-items: center;
 25 |   }
 26 | 
 27 |   main {
 28 |     flex-shrink: 0;
 29 |     padding: 0.5rem;
 30 |     background-color: var(--color-0);
 31 |     border: 2px solid black;
 32 |     width: 400px;
 33 |     box-shadow: -4px 4px 0px rgba(0, 0, 0, 0.4);
 34 |   }
 35 | 
 36 |   @media screen and (max-width: 464px) {
 37 |     main {
 38 |       transform: scale(0.8);
 39 |     }
 40 |   }
 41 | 
 42 |   h1 {
 43 |     margin: 0px;
 44 |     margin-bottom: 0.5rem;
 45 |     font-size: 1.25rem;
 46 |   }
 47 | 
 48 |   input {
 49 |     border: 2px solid black;
 50 |   }
 51 | 
 52 |   button {
 53 |     border: 2px solid black;
 54 |     background-color: white;
 55 |     width: 4rem;
 56 |     cursor: pointer;
 57 |     font-style: italic;
 58 |     background-color: var(--color-2);
 59 |   }
 60 | 
 61 |   button:hover {
 62 |     background-color: var(--color-1);
 63 |   }
 64 | 
 65 |   .container {
 66 |     display: grid;
 67 |     gap: 0.5rem;
 68 |     grid-template-columns: 1fr 0.75fr;
 69 |   }
 70 | 
 71 |   .move-form {
 72 |     background-color: var(--color-3);
 73 |     border: 2px solid black;
 74 |     gap: 0.5rem;
 75 |     padding: 0.5rem;
 76 |     display: flex;
 77 |     flex-direction: column;
 78 |   }
 79 | 
 80 |   #inv-items,
 81 |   #inv-moves {
 82 |     display: flex;
 83 |     flex-direction: column;
 84 |     border: 2px solid black;
 85 |     padding: 0.5rem;
 86 |     gap: 0.5rem;
 87 | 
 88 |     max-height: calc(0.5rem * 2 + 2px + 110px);
 89 |     overflow-y: auto;
 90 |     box-sizing: border-box;
 91 |     font-size: 14px;
 92 |   }
 93 | 
 94 |   #inv-items {
 95 |     min-height: 100%;
 96 |     background-color: var(--color-4);
 97 |   }
 98 | 
 99 |   #inv-moves {
100 |     grid-column: 1 / 3;
101 |     color: white;
102 |     background-color: var(--color-5);
103 |   }
104 | 
105 |   #add {
106 |     display: flex;
107 |     width: 100%;
108 |     justify-content: space-between;
109 |   }
110 | 
111 |   #add > input {
112 |     width: calc(100% - 4rem - 0.5rem);
113 |   }
114 | </style>
115 | <!-- HEAD_END -->
116 | 
117 | <!-- TEMPLATES_START -->
118 | <!-- Inv Item Template -->
119 | <template name="inv-item">
120 |   <div class="inv-item">
121 |     <p style="margin: 0"><slot name="name" /></p>
122 |     <p style="margin: 0"><slot name="quantity" /></p>
123 | 
124 |     <style>
125 |       .inv-item {
126 |         display: flex;
127 |         justify-content: space-between;
128 |       }
129 |     </style>
130 |   </div>
131 | </template>
132 | 
133 | <!-- Inv Movement Template -->
134 | <template name="inv-move">
135 |   <div class="inv-move">
136 |     <p class="mindex"><slot name="index" /></p>
137 |     <p style="font-style: italic"><slot name="time" /></p>
138 |     <p style="font-weight: 600"><slot name="item" /></p>
139 |     <p><slot name="quantity" /></p>
140 | 
141 |     <style>
142 |       .inv-move {
143 |         display: grid;
144 |         justify-content: space-between;
145 |         grid-template-columns: 2rem 4rem 1fr 4rem;
146 |       }
147 | 
148 |       .inv-move > p {
149 |         margin: 0;
150 |         text-align: right;
151 |       }
152 | 
153 |       .mindex::after {
154 |         content: '.';
155 |       }
156 |     </style>
157 |   </div>
158 | </template>
159 | <!-- TEMPLATES_END -->
160 | 
161 | <!-- BODY_START -->
162 | <main>
163 |   <h1>Inventory</h1>
164 |   <div class="container">
165 |     <div id-class="inv-form">
166 |       <div id="add">
167 |         <input id="item-name" placeholder="Add item" />
168 |         <button id="add-button">add</button>
169 |       </div>
170 | 
171 |       <div class="move-form" style="margin-top: 0.5rem">
172 |         <input id="move-item" placeholder="Item to move" />
173 |         <input id="move-qty" placeholder="Qty to move" />
174 |         <button sb-disable="cannotMove" id="move-button">move</button>
175 |       </div>
176 |     </div>
177 | 
178 |     <div id="inv-items">
179 |       <inv-item sb-mark="items.#">
180 |         <span slot="name" sb-mark="items.#.name"></span>
181 |         <span slot="quantity" sb-mark="items.#.quantity"></span>
182 |       </inv-item>
183 |     </div>
184 | 
185 |     <div id="inv-moves" sb-mark="moves" sb-child="inv-move">
186 |       <inv-move sb-mark="moves.#">
187 |         <span slot="index" sb-mark="moves.#.index"></span>
188 |         <span slot="time" sb-mark="moves.#.time"></span>
189 |         <span slot="item" sb-mark="moves.#.item"></span>
190 |         <span slot="quantity" sb-mark="moves.#.quantity"></span>
191 |       </inv-move>
192 |     </div>
193 |   </div>
194 | </main>
195 | <!-- BODY_END -->
196 | 
197 | <script>
198 |   // LOGIC_START
199 |   // Strawberry init
200 |   const data = sb.init();
201 | 
202 |   data.qtys = {};
203 |   data.moves = [];
204 |   data.items = () =>
205 |     Object.keys(data.qtys).map((name) => ({
206 |       name,
207 |       quantity: data.qtys[name],
208 |     }));
209 | 
210 |   // "Business Logic"
211 |   function create(item) {
212 |     if (item in data.qtys) {
213 |       return alert(`${item} exists.`);
214 |     }
215 | 
216 |     data.qtys[item] = 0;
217 |   }
218 | 
219 |   function move(item, quantity) {
220 |     const stock = data.qtys[item] ?? 0;
221 |     if (quantity + stock < 0) {
222 |       return alert(`Insufficient quantity ${stock} of ${item}.`);
223 |     }
224 | 
225 |     data.qtys[item] = quantity + stock;
226 |     data.moves.push({
227 |       index: data.moves.length + 1,
228 |       time: new Date().toTimeString().split(' ')[0],
229 |       item,
230 |       quantity,
231 |     });
232 |   }
233 | 
234 |   // Button onclick listeners
235 |   document.getElementById('add-button')?.addEventListener('click', () => {
236 |     const item = document.getElementById('item-name')?.value;
237 |     if (typeof item === 'string' && item) {
238 |       create(item);
239 |     }
240 |   });
241 | 
242 |   document.getElementById('move-button')?.addEventListener('click', () => {
243 |     const item = document.getElementById('move-item')?.value;
244 |     const qty = Number(document.getElementById('move-qty')?.value);
245 | 
246 |     if (
247 |       typeof item === 'string' &&
248 |       item &&
249 |       !Number.isNaN(qty) &&
250 |       Number.isFinite(qty)
251 |     ) {
252 |       move(item, qty);
253 |     }
254 |   });
255 | 
256 |   // Demo Data
257 |   create('Strawberry');
258 |   create('Mulberry');
259 |   move('Strawberry', 7);
260 |   move('Mulberry', 1);
261 |   move('Strawberry', -1);
262 |   // LOGIC_END
263 | </script>
264 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@esbuild/android-arm64@0.17.15":
  6 |   version "0.17.15"
  7 |   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42"
  8 |   integrity sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==
  9 | 
 10 | "@esbuild/android-arm@0.17.15":
 11 |   version "0.17.15"
 12 |   resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.15.tgz#143e0d4e4c08c786ea410b9a7739779a9a1315d8"
 13 |   integrity sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==
 14 | 
 15 | "@esbuild/android-x64@0.17.15":
 16 |   version "0.17.15"
 17 |   resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.15.tgz#d2d12a7676b2589864281b2274355200916540bc"
 18 |   integrity sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==
 19 | 
 20 | "@esbuild/darwin-arm64@0.17.15":
 21 |   version "0.17.15"
 22 |   resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz#2e88e79f1d327a2a7d9d06397e5232eb0a473d61"
 23 |   integrity sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==
 24 | 
 25 | "@esbuild/darwin-x64@0.17.15":
 26 |   version "0.17.15"
 27 |   resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz#9384e64c0be91388c57be6d3a5eaf1c32a99c91d"
 28 |   integrity sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==
 29 | 
 30 | "@esbuild/freebsd-arm64@0.17.15":
 31 |   version "0.17.15"
 32 |   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz#2ad5a35bc52ebd9ca6b845dbc59ba39647a93c1a"
 33 |   integrity sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==
 34 | 
 35 | "@esbuild/freebsd-x64@0.17.15":
 36 |   version "0.17.15"
 37 |   resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz#b513a48446f96c75fda5bef470e64d342d4379cd"
 38 |   integrity sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==
 39 | 
 40 | "@esbuild/linux-arm64@0.17.15":
 41 |   version "0.17.15"
 42 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz#9697b168175bfd41fa9cc4a72dd0d48f24715f31"
 43 |   integrity sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==
 44 | 
 45 | "@esbuild/linux-arm@0.17.15":
 46 |   version "0.17.15"
 47 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz#5b22062c54f48cd92fab9ffd993732a52db70cd3"
 48 |   integrity sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==
 49 | 
 50 | "@esbuild/linux-ia32@0.17.15":
 51 |   version "0.17.15"
 52 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz#eb28a13f9b60b5189fcc9e98e1024f6b657ba54c"
 53 |   integrity sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==
 54 | 
 55 | "@esbuild/linux-loong64@0.17.15":
 56 |   version "0.17.15"
 57 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz#32454bdfe144cf74b77895a8ad21a15cb81cfbe5"
 58 |   integrity sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==
 59 | 
 60 | "@esbuild/linux-mips64el@0.17.15":
 61 |   version "0.17.15"
 62 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz#af12bde0d775a318fad90eb13a0455229a63987c"
 63 |   integrity sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==
 64 | 
 65 | "@esbuild/linux-ppc64@0.17.15":
 66 |   version "0.17.15"
 67 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz#34c5ed145b2dfc493d3e652abac8bd3baa3865a5"
 68 |   integrity sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==
 69 | 
 70 | "@esbuild/linux-riscv64@0.17.15":
 71 |   version "0.17.15"
 72 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz#87bd515e837f2eb004b45f9e6a94dc5b93f22b92"
 73 |   integrity sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==
 74 | 
 75 | "@esbuild/linux-s390x@0.17.15":
 76 |   version "0.17.15"
 77 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz#20bf7947197f199ddac2ec412029a414ceae3aa3"
 78 |   integrity sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==
 79 | 
 80 | "@esbuild/linux-x64@0.17.15":
 81 |   version "0.17.15"
 82 |   resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124"
 83 |   integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==
 84 | 
 85 | "@esbuild/netbsd-x64@0.17.15":
 86 |   version "0.17.15"
 87 |   resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz#8da299b3ac6875836ca8cdc1925826498069ac65"
 88 |   integrity sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==
 89 | 
 90 | "@esbuild/openbsd-x64@0.17.15":
 91 |   version "0.17.15"
 92 |   resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz#04a1ec3d4e919714dba68dcf09eeb1228ad0d20c"
 93 |   integrity sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==
 94 | 
 95 | "@esbuild/sunos-x64@0.17.15":
 96 |   version "0.17.15"
 97 |   resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz#6694ebe4e16e5cd7dab6505ff7c28f9c1c695ce5"
 98 |   integrity sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==
 99 | 
100 | "@esbuild/win32-arm64@0.17.15":
101 |   version "0.17.15"
102 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz#1f95b2564193c8d1fee8f8129a0609728171d500"
103 |   integrity sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==
104 | 
105 | "@esbuild/win32-ia32@0.17.15":
106 |   version "0.17.15"
107 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz#c362b88b3df21916ed7bcf75c6d09c6bf3ae354a"
108 |   integrity sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==
109 | 
110 | "@esbuild/win32-x64@0.17.15":
111 |   version "0.17.15"
112 |   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz#c2e737f3a201ebff8e2ac2b8e9f246b397ad19b8"
113 |   integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==
114 | 
115 | esbuild@^0.17.15:
116 |   version "0.17.15"
117 |   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.15.tgz#209ebc87cb671ffb79574db93494b10ffaf43cbc"
118 |   integrity sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==
119 |   optionalDependencies:
120 |     "@esbuild/android-arm" "0.17.15"
121 |     "@esbuild/android-arm64" "0.17.15"
122 |     "@esbuild/android-x64" "0.17.15"
123 |     "@esbuild/darwin-arm64" "0.17.15"
124 |     "@esbuild/darwin-x64" "0.17.15"
125 |     "@esbuild/freebsd-arm64" "0.17.15"
126 |     "@esbuild/freebsd-x64" "0.17.15"
127 |     "@esbuild/linux-arm" "0.17.15"
128 |     "@esbuild/linux-arm64" "0.17.15"
129 |     "@esbuild/linux-ia32" "0.17.15"
130 |     "@esbuild/linux-loong64" "0.17.15"
131 |     "@esbuild/linux-mips64el" "0.17.15"
132 |     "@esbuild/linux-ppc64" "0.17.15"
133 |     "@esbuild/linux-riscv64" "0.17.15"
134 |     "@esbuild/linux-s390x" "0.17.15"
135 |     "@esbuild/linux-x64" "0.17.15"
136 |     "@esbuild/netbsd-x64" "0.17.15"
137 |     "@esbuild/openbsd-x64" "0.17.15"
138 |     "@esbuild/sunos-x64" "0.17.15"
139 |     "@esbuild/win32-arm64" "0.17.15"
140 |     "@esbuild/win32-ia32" "0.17.15"
141 |     "@esbuild/win32-x64" "0.17.15"
142 | 
143 | typescript@^5.0.3:
144 |   version "5.0.3"
145 |   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.3.tgz#fe976f0c826a88d0a382007681cbb2da44afdedf"
146 |   integrity sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==
147 | 


--------------------------------------------------------------------------------