Initial Release

.github/workflows/ci.yml

@@ -0,0 +1,9 @@
+name: CI
+
+on: push
+
+jobs:
+  test-e2e:
+    uses: jill64/playwright-config/.github/workflows/duplex-playwright.yml@main
+    with:
+      hosting-provider: cloudflare

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/dist
+/test-results
+.svelte-kit
+.env
+.env.*
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+package-lock.json

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

README.md

@@ -1,2 +1,38 @@
+<!----- BEGIN GHOST DOCS HEADER ----->
+
 # svelte-hydrated
-💧 Indicating hydration status by svelte-store 
+
+<!----- BEGIN GHOST DOCS BADGES -----><a href="https://npmjs.com/package/svelte-hydrated"><img src="https://img.shields.io/npm/v/svelte-hydrated" alt="npm-version" /></a> <a href="https://npmjs.com/package/svelte-hydrated"><img src="https://img.shields.io/npm/l/svelte-hydrated" alt="npm-license" /></a> <a href="https://npmjs.com/package/svelte-hydrated"><img src="https://img.shields.io/npm/dm/svelte-hydrated" alt="npm-download-month" /></a> <a href="https://npmjs.com/package/svelte-hydrated"><img src="https://img.shields.io/bundlephobia/min/svelte-hydrated" alt="npm-min-size" /></a> <a href="https://github.com/jill64/svelte-hydrated/actions/workflows/ci.yml"><img src="https://github.com/jill64/svelte-hydrated/actions/workflows/ci.yml/badge.svg" alt="ci.yml" /></a><!----- END GHOST DOCS BADGES ----->
+
+💧 Indicating hydration status by svelte-store
+
+<!----- END GHOST DOCS HEADER ----->
+
+## Installation
+
+```bash
+npm i svelte-hydrated
+```
+
+## Example
+
+The `$hydrated` store is updated to `true` at the next tick when the `browser` is `true`
+
+```svelte
+<script>
+  import { hydrated } from 'svelte-hydrated'
+  import { slide } from 'svelte/transition'
+</script>
+
+{#if $hydrated}
+  <h2 transition:slide>Hydrated</h2>
+{:else}
+  <h2 transition:slide>Not Hydrated</h2>
+{/if}
+```
+
+## Why not use `browser` ?
+
+The `browser` (`$app/environment`) is useful for identifying the execution environment of the code, but its value is determined before the first rendering is started.  
+This means that `transition` etc. will not be triggered when hydration completes.  
+The `$hydrated` store is updated to `true` at the next `tick` when the browser is `true`, making it simpler to set `transition`.

eslint.config.js

@@ -0,0 +1,4 @@
+import { svelteTsConfig } from '@jill64/eslint-config-svelte'
+
+/** @type {import('@jill64/eslint-config-svelte').FlatConfig[]} */
+export default svelteTsConfig()

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "svelte-hydrated",
+  "description": "",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "prettier": "@jill64/prettier-config",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "npm run build && vite preview",
+    "prepack": "npm run build",
+    "package": "svelte-kit sync && npx @sveltejs/package && npx publint",
+    "check": "svelte-kit sync && npx svelte-check",
+    "lint": "npm run check && npx eslint .",
+    "format": "npx @jill64/psx",
+    "test": "playwright test"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^1.0.0",
+    "svelte": "^4.0.0"
+  },
+  "devDependencies": {
+    "@jill64/eslint-config-svelte": "1.0.3",
+    "@jill64/npm-demo-layout": "0.3.3",
+    "@jill64/playwright-config": "2.2.0",
+    "@jill64/prettier-config": "1.0.0",
+    "@jill64/sentry-sveltekit-cloudflare": "1.5.0",
+    "@jill64/universal-sanitizer": "1.0.0",
+    "@playwright/test": "1.40.1",
+    "@sveltejs/adapter-cloudflare": "2.3.4",
+    "@sveltejs/kit": "1.30.1",
+    "svelte": "4.2.8",
+    "svelte-feather-icons": "^4.0.1",
+    "typescript": "5.3.3",
+    "vite": "5.0.8",
+    "vitest": "1.0.4"
+  },
+  "homepage": "",
+  "author": {
+    "name": "",
+    "image": "",
+    "url": ""
+  },
+  "repository": {
+    "type": "git",
+    "url": "",
+    "image": ""
+  }
+}

playwright.config.ts

@@ -0,0 +1,3 @@
+import { extendsConfig, branchPreview } from '@jill64/playwright-config'
+
+export default extendsConfig(branchPreview())