add ESM support

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /index.js
+/index.esm.js
 /index.html
 /perf.html
 /temp

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

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:
 </script>
 <p data-sb-mark="message"></p>
 ```
+
+### `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
+<script type="module">
+  import { init, rdo } from 'sb';
+
+  rdo() === null; // evaluates to true
+
+  // Module 1: Initialize Strawberry
+  const data = init();
+
+  rdo() === data; // evaluates to true
+</script>
+
+<script type="module">
+  import { rdo } from 'sb';
+
+  // Module 2: Get data from `rdo` after init
+  // in Module 1.
+  const data = rdo();
+</script>
+```

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 `<script type="module">` deleting
+> a value in the script will cause elements marked with the value bot
+> **before and after** the script tag to be deleted.
+> 
+> This is because module execution is
+> [deferred](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts).

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 rdo(): typeof globalData {
+  return globalData;
+}
+
 /**
 
 # Scratch Space

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"
   },