Skip to content

Commit

Permalink
Merge pull request #1 from jill64/dev
Browse files Browse the repository at this point in the history
Initial Release
  • Loading branch information
wraith-ci[bot] authored Dec 13, 2023
2 parents c9eebbb + 40f82d7 commit 4f65965
Show file tree
Hide file tree
Showing 20 changed files with 3,981 additions and 1 deletion.
9 changes: 9 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
pnpm-lock.yaml
38 changes: 37 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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`.
4 changes: 4 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { svelteTsConfig } from '@jill64/eslint-config-svelte'

/** @type {import('@jill64/eslint-config-svelte').FlatConfig[]} */
export default svelteTsConfig()
70 changes: 70 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
{
"name": "svelte-hydrated",
"description": "💧 Indicating hydration status by svelte-store ",
"version": "0.0.1",
"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": "https://github.com/jill64/svelte-hydrated#readme",
"author": {
"name": "jill64",
"email": "[email protected]",
"url": "https://github.com/jill64",
"image": "https://avatars.githubusercontent.com/u/143883742?v=4"
},
"repository": {
"type": "git",
"url": "https://github.com/jill64/svelte-hydrated.git",
"image": "https://opengraph.githubassets.com/e1d0f3527ce09af54baad4022887a57c3739f51e73ac60024c26b98abba4dcce/jill64/svelte-hydrated"
},
"license": "MIT",
"bugs": "https://github.com/jill64/svelte-hydrated/issues",
"keywords": [
"hydraion",
"ssr",
"state",
"store",
"svelte"
]
}
3 changes: 3 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { extendsConfig, branchPreview } from '@jill64/playwright-config'

export default extendsConfig(branchPreview())
Loading

0 comments on commit 4f65965

Please sign in to comment.