From 320e2602ab8a0a5b0788d16fb59bc55ade1e25e1 Mon Sep 17 00:00:00 2001 From: 18alantom <2.alan.tom@gmail.com> Date: Mon, 23 Oct 2023 11:22:20 +0530 Subject: [PATCH 1/3] add esm export --- dist.sh | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/dist.sh b/dist.sh index e140819..79d597c 100755 --- a/dist.sh +++ b/dist.sh @@ -11,18 +11,29 @@ mkdir dist version=$(cat package.json | grep '"version"' | cut -d'"' -f4) file_path="dist/sb.min.js" +file_path_esm="dist/sb.min.esm.js" + file_header="/* Strawberry $version * Copyright (c) 2023-present, Alan Tom (18alantom) * MIT License * This is a generated file. Do not edit.*/" echo "$file_header" >> "$file_path" +echo "$file_header" >> "$file_path_esm" + node_modules/.bin/esbuild ./index.ts --bundle --minify --format=iife --global-name=sb >> "$file_path" +node_modules/.bin/esbuild ./index.ts --bundle --minify --format=esm >> "$file_path_esm" + +print_done() { + size=$(wc -c < $1) + gzsize=$(gzip -c $1 | wc -c) -size=$(wc -c < $file_path) -gzsize=$(gzip -c $file_path | wc -c) + kb=$(echo "scale=3; $size / 1024" | bc) + gzkb=$(echo "scale=3; $gzsize / 1024" | bc) -kb=$(echo "scale=3; $size / 1024" | bc) -gzkb=$(echo "scale=3; $gzsize / 1024" | bc) + path=$(printf "%-18s" $1) + echo "$path :: size: ${kb}KB, gzip: ${gzkb}KB" +} -echo "dist/sb.min.js is ${kb}KB and gzipped ${gzkb}KB" +print_done $file_path +print_done $file_path_esm \ No newline at end of file From aad07171a18ea0c51f6d39bceff1077d2e420838 Mon Sep 17 00:00:00 2001 From: 18alantom <2.alan.tom@gmail.com> Date: Mon, 23 Oct 2023 12:27:35 +0530 Subject: [PATCH 2/3] add ESM converted general tests --- .gitignore | 1 + index.ts | 8 + package.json | 1 + tests/esm/test.html | 417 +++++++++++++++++++++++++++++++++++ tests/index.html | 10 + tests/test.computed.html | 2 +- tests/test.conditionals.html | 2 +- tests/test.directives.html | 2 +- tests/test.html | 2 +- tests/test.loops.html | 2 +- tests/test.templates.html | 2 +- 11 files changed, 443 insertions(+), 6 deletions(-) create mode 100644 tests/esm/test.html diff --git a/.gitignore b/.gitignore index cf52e28..94a3528 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /node_modules /index.js +/index.esm.js /index.html /perf.html /temp diff --git a/index.ts b/index.ts index dafd460..b561205 100644 --- a/index.ts +++ b/index.ts @@ -1201,6 +1201,14 @@ export function unwatch(key?: string, watcher?: Watcher): void { } } +/** + * Returns reactive data object if sb.init has been called, else + * returns null. + */ +export function data(): typeof globalData { + return globalData; +} + /** # Scratch Space diff --git a/package.json b/package.json index ab4d632..2f2b9f6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ ], "scripts": { "dev": "esbuild ./index.ts --bundle --format=iife --global-name=sb --watch --outfile=index.js", + "dev-esm": "esbuild ./index.ts --bundle --format=esm --global-name=sb --watch --outfile=index.esm.js", "dist": "./dist.sh", "pub": "tsc && yarn dist && yarn publish --access public && ./postpub.sh" }, diff --git a/tests/esm/test.html b/tests/esm/test.html new file mode 100644 index 0000000..20c0f3f --- /dev/null +++ b/tests/esm/test.html @@ -0,0 +1,417 @@ + + + + + + + Sb Test (ESM) - General + + + + + + +
+

General (ESM)

+
+

Success: 0

+

Failure: 0

+

Total: 0

+
+
+ + + +

notset

+ + + + + + red + green + + + + + +

notset

+ + +
+ +
+ + + + + + + + + + +
+ + + + +
+ + + + + + +
+ + + +
+ + + + diff --git a/tests/index.html b/tests/index.html index 06a4e24..e01371a 100644 --- a/tests/index.html +++ b/tests/index.html @@ -31,12 +31,22 @@ display: flex; flex-direction: column; } + + h1 { + color: white; + font-size: 4rem; + } +

Strawberry Tests

general
+
+ general (ESM) + +
templates diff --git a/tests/test.computed.html b/tests/test.computed.html index 696d0cb..38cb3fd 100644 --- a/tests/test.computed.html +++ b/tests/test.computed.html @@ -17,7 +17,7 @@
-

Computed Tests

+

Computed

Success: 0

Failure: 0

diff --git a/tests/test.conditionals.html b/tests/test.conditionals.html index ba4d4f9..8de5e36 100644 --- a/tests/test.conditionals.html +++ b/tests/test.conditionals.html @@ -13,7 +13,7 @@
-

Conditionals Tests

+

Conditionals

Success: 0

Failure: 0

diff --git a/tests/test.directives.html b/tests/test.directives.html index 300e7fa..c3f341d 100644 --- a/tests/test.directives.html +++ b/tests/test.directives.html @@ -11,7 +11,7 @@
-

Directives Tests

+

Directives

Success: 0

Failure: 0

diff --git a/tests/test.html b/tests/test.html index cc76035..0392147 100644 --- a/tests/test.html +++ b/tests/test.html @@ -16,7 +16,7 @@
-

General Tests

+

General

Success: 0

Failure: 0

diff --git a/tests/test.loops.html b/tests/test.loops.html index 548119d..f7374e4 100644 --- a/tests/test.loops.html +++ b/tests/test.loops.html @@ -11,7 +11,7 @@
-

Loop Tests

+

Loop

Success: 0

Failure: 0

diff --git a/tests/test.templates.html b/tests/test.templates.html index b6972a7..5f7aaca 100644 --- a/tests/test.templates.html +++ b/tests/test.templates.html @@ -18,7 +18,7 @@
-

Template Tests

+

Template

Success: 0

Failure: 0

From 9eff493eb3ea6adfaaac533f348972bbbcdde223 Mon Sep 17 00:00:00 2001 From: 18alantom <2.alan.tom@gmail.com> Date: Mon, 23 Oct 2023 12:41:12 +0530 Subject: [PATCH 3/3] update docs with some ESM info - rename `sb.data` to `sb.rdo` --- docs/api.md | 34 ++++++++++++++++++++++++++++++++++ docs/reactivity/mark.md | 9 +++++++++ index.ts | 2 +- tests/esm/test.html | 22 +++++++++++----------- 4 files changed, 55 insertions(+), 12 deletions(-) diff --git a/docs/api.md b/docs/api.md index 349635d..0e0dfce 100644 --- a/docs/api.md +++ b/docs/api.md @@ -14,6 +14,7 @@ This page lists the available strawberry directives and exported methods. 5. [`register`](#register): register custom components. 6. [`load`](#load): load components from external files. 7. [`prefix`](#prefix): change prefix `"sb"` to a custom value. + 8. [`rdo`](#rdo): returns the reactive data object if initialized. ## Directives @@ -301,3 +302,36 @@ if you want to use data attributes to manage directives you can do this:

``` + +### `rdo` + +```typescript +function rdo(): ReactiveObject | null; +``` + +Returns the **r**eactive **d**ata **o**bject if Strawberry has been initialized using +[`sb.init`](#init). + +Useful for when Strawberry is being use as an ESM import where global state is +not shared across module scripts. Example: + +```html + + + +``` diff --git a/docs/reactivity/mark.md b/docs/reactivity/mark.md index a43f6c9..6f87dc7 100644 --- a/docs/reactivity/mark.md +++ b/docs/reactivity/mark.md @@ -165,3 +165,12 @@ If removing elements from the DOM is not what you intend to happen, you can inst > Array items on the other hand can be deleted `delete data.list[0]` but this is > not recommended as it will lead to incorrect sequences of keys, instead use > array operations such as `splice`, `pop`, or `shift`. + +> **Note**: **Deleting Values in Modules** +> +> When using Strawberry as an ESM import. i.e `