initial commit

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig is awesome: https://EditorConfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{yml,yaml}]
+indent_style = space
+
+[*.{cjs,js,mjs,ts}]
+block_comment_start = /*
+block_comment = *
+block_comment_end = */
+
+[*.{markdown,md}]
+trim_trailing_whitespace = false

.github/workflows/stale.yml

@@ -0,0 +1,22 @@
+name: 'Stale issues and PR'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v4
+        with:
+          stale-issue-label: stale
+          stale-pr-label: stale
+          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days.'
+          stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days.'
+          close-issue-message: 'This issue was closed because it has been stalled for 14 days with no activity.'
+          close-pr-message: 'This PR was closed because it has been stalled for 14 days with no activity.'
+          days-before-issue-stale: 30
+          days-before-pr-stale: 30
+          days-before-issue-close: 14
+          days-before-pr-close: 14
+          exempt-issue-labels: 'bug,enhancement,stale-exempt'

.github/workflows/test.yml

@@ -0,0 +1,94 @@
+name: CI
+
+on:
+  push:
+    paths:
+    - '.github/**'
+    - 'src/**'
+    - 'tests/**'
+    - 'types/**'
+    - 'package.json'
+    - 'pnpm-lock.yaml'
+  pull_request:
+      paths:
+      - '.github/**'
+      - 'src/**'
+      - 'tests/**'
+      - 'types/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
+  workflow_dispatch:
+
+jobs:
+  default:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ['lts/*', '*']
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+    - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+      with:
+        fetch-depth: 10
+
+    - name: Install NSIS (macOS)
+      if: matrix.os == 'macos-latest'
+      run: |
+        brew update
+        brew install nsis
+
+    - name: Install NSIS (Ubuntu)
+      if: matrix.os == 'ubuntu-latest'
+      run:   |
+        sudo apt-get -y update
+        sudo apt-get -y install nsis
+
+    - name: Install NSIS (Windows)
+      if: matrix.os == 'windows-latest'
+      shell: pwsh
+      run: |
+        [Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12
+        iwr -useb get.scoop.sh -outfile 'install.ps1'
+        .\install.ps1 -RunAsAdmin
+        scoop bucket add nsis https://github.com/NSIS-Dev/scoop-nsis
+        scoop install nsis/nsis
+
+    - name: Print NSIS version
+      run: makensis -VERSION
+
+    - name: Print NSIS header info
+      run: makensis -HDRINFO
+
+    - uses: actions/setup-node@b39b52d1213e96004bfcb1c61a8a6fa8ab84f3e8 # v4.0.1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Enable Corepack
+      run: corepack enable
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      run: |
+        echo "::set-output name=pnpm_store_path::$(pnpm store path)"
+
+    - uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2 # v4.0.0
+      name: Setup pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.pnpm_store_path }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile --strict-peer-dependencies
+
+    - name: Lint Source
+      run: pnpm run --if-present lint
+
+    - name: Build Source
+      run: pnpm run --if-present build
+
+    - name: Run Tests
+      run: pnpm run --if-present test

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.vite-config/.gitignore

@@ -0,0 +1 @@
+*.ts.timestamp-*.mjs

.vite-config/iframe.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import mkcert from 'vite-plugin-mkcert';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    define: {
+        PAGE_TYPE: JSON.stringify('iframe')
+    },
+    plugins: [
+        mkcert(),
+        svelte(),
+    ],
+    root: resolve(process.cwd(), 'demo'),
+});

.vite-config/main.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import mkcert from 'vite-plugin-mkcert';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    define: {
+        PAGE_TYPE: JSON.stringify('main')
+    },
+    plugins: [
+        mkcert(),
+        svelte(),
+    ],
+    root: resolve(process.cwd(), 'demo')
+})

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -0,0 +1,49 @@
+# svelte-crossorigin-store
+
+> Share your Svelte store across origins, including iFrames.
+
+[![License](https://img.shields.io/github/license/idleberg/svelte-crossorigin-store?color=blue&style=for-the-badge)](https://github.com/idleberg/svelte-crossorigin-store/blob/main/LICENSE)
+[![Version](https://img.shields.io/npm/v/svelte-crossorigin-store?style=for-the-badge)](https://www.npmjs.org/package/svelte-crossorigin-store)
+[![Build](https://img.shields.io/github/actions/workflow/status/idleberg/svelte-crossorigin-store/default.yml?style=for-the-badge)](https://github.com/idleberg/svelte-crossorigin-store/actions)
+
+**Features**
+
+- framesynchronizes across multiple origins
+- supports iFrames
+- tiny (<700 bytes minified, before gzip)
+
+## Installation
+
+`npm install svelte-crossorigin-store`
+
+## Usage
+
+### Import
+
+```svelte
+<script>
+	import { createStore } from 'svelte-crossorigin-store';
+
+	const store = createStore('Hello, world');
+</script>
+
+<p>{$store}</p>
+```
+
+### Methods
+
+The created store exposes the same API methods like a writable `svelte/store`:
+
+- `set()`
+- `update()`
+- `subscribe()`
+
+Please refer to the [official documentation](https://svelte.dev/docs/svelte-store#writable).
+
+## License
+
+This work is licensed under [The MIT License](LICENSE)
+
+[dot notation]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Dot_notation
+[storage api]: https://developer.mozilla.org/en-US/docs/Web/API/Storage
+[indexeddb api]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo Page</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

demo/src/App.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Column, Grid, Row } from "carbon-components-svelte";
+  import Main from './lib/Main.svelte';
+  import Iframe from './lib/Iframe.svelte';
+</script>       
+
+{#if PAGE_TYPE === 'main'}
+  <Grid fullWidth>
+    <Row>
+      <Column padding>
+        <h1>Demo Page</h1>
+        <p>Change the counter in any of these origins to see the state being synched.</p>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column padding>
+        <Main />
+      </Column>
+    </Row>
+
+    <Row>     
+      <Column padding>
+          <iframe frameborder="0" src="https://localhost:3031" title="iFrame #1" />
+      </Column>
+    </Row>
+
+    <Row>
+      <Column padding>
+        <iframe frameborder="0" src="https://localhost:3032" title="iFrame #2" />
+      </Column>
+    </Row>
+  </Grid>
+{/if}
+
+{#if PAGE_TYPE === 'iframe'}
+  <svelte:component this={Iframe} />
+{/if}
+
+<style>
+  iframe {
+    width: 100%;
+    height: 150px;
+  }
+</style>

demo/src/lib/Iframe.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Store from './Store.svelte';
+</script>
+
+<svelte:head>
+  <title>Demo Page | iFrame | {window?.location?.origin}</title>
+</svelte:head>
+
+<Store />

demo/src/lib/Main.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Store from './Store.svelte';
+</script>
+
+<svelte:head>
+  <title>Demo Page | Main</title>
+</svelte:head>
+
+<Store />

demo/src/lib/Store.svelte

@@ -0,0 +1,42 @@
+<script>
+    import { Button, ButtonSet, Tag } from "carbon-components-svelte";
+    import { createStore } from '../../../src/index.ts';
+
+    import Add from "carbon-icons-svelte/lib/Add.svelte";
+    import Subtract from "carbon-icons-svelte/lib/Subtract.svelte";
+    import Reset from "carbon-icons-svelte/lib/Reset.svelte";
+
+    const store = createStore(1, {
+        callback: (value) => {
+            localStorage.setItem('counter', value);
+        }
+    });
+
+    const clickHandler = (value = 0) => {
+        store.update(counter => value === null ? 0 : counter + value);
+    }
+</script>
+
+<section>
+    <h2>
+        {window && window === window?.top ? 'Parent' : 'iFrame'}
+        <Tag type="outline">{window?.location?.host}</Tag>
+        <Tag type="high-contrast">Current Value: {$store}</Tag>
+    </h2>
+
+    <ButtonSet>
+        <Button icon={Add} on:click={() => clickHandler(1)}>Add</Button>
+        <Button icon={Subtract} on:click={() => clickHandler(-1)}>Subtract</Button>
+        <Button icon={Reset} kind="secondary" on:click={() => clickHandler(null)}>reset</Button>
+    </ButtonSet>
+</section>
+
+<style>
+    h2 {
+        margin: 1rem 0
+    }
+
+    section {
+        height: 150px;
+    }
+</style>

demo/src/main.ts

@@ -0,0 +1,8 @@
+import App from './App.svelte'
+import "carbon-components-svelte/css/white.css";
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app

demo/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />