@ssgoi/svelte 0.0.6 → 2.0.0

package/README.md

@@ -1,58 +1,288 @@
-# Svelte library
+# @ssgoi/svelte
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+try this: [ssgoi.dev](https://ssgoi.dev)
 
-## Creating a project
+![https://ssgoi.dev](https://ssgoi.dev/ssgoi.gif)
 
-If you're seeing this, you've probably already done this step. Congrats!
+## What is SSGOI?
+
+SSGOI brings native app-like page transitions to the web. Transform your static page navigations into smooth, delightful experiences that users love.
+
+### ✨ Key Features
+
+- **🌍 Works Everywhere** - Unlike the browser's View Transition API, SSGOI works in all modern browsers (Chrome, Firefox, Safari)
+- **🚀 SSR Ready** - Perfect compatibility with SvelteKit. No hydration issues, SEO-friendly
+- **🎯 Use Your Router** - Keep your existing routing. SvelteKit's built-in router works seamlessly
+- **💾 State Persistence** - Remembers animation state during navigation, even with browser back/forward
+- **🧩 Svelte Native** - Built specifically for Svelte with actions and stores
+
+## Installation
 
 ```bash
-# create a new project in the current directory
-npx sv create
+npm install @ssgoi/svelte
+# or
+yarn add @ssgoi/svelte
+# or
+pnpm add @ssgoi/svelte
+```
+
+## Quick Start
+
+### 1. Wrap your app layout
+
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { Ssgoi } from '@ssgoi/svelte';
+  import { fade } from '@ssgoi/svelte/view-transitions';
+</script>
 
-# create a new project in my-app
-npx sv create my-app
+<Ssgoi config={{ defaultTransition: fade() }}>
+  <!-- ⚠️ Important: position: relative is required! -->
+  <div style="position: relative; min-height: 100vh;">
+    <slot />
+  </div>
+</Ssgoi>
 ```
 
-## Developing
+### 2. Wrap your pages
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { SsgoiTransition } from '@ssgoi/svelte';
+  import { page } from '$app/stores';
+</script>
 
-```bash
-npm run dev
+<SsgoiTransition id={$page.url.pathname}>
+  <h1>Welcome</h1>
+  <!-- Page content -->
+</SsgoiTransition>
+```
+
+**That's it!** Your pages now transition smoothly with a fade effect.
+
+## Advanced Transitions
+
+### Route-based Transitions
+
+Define different transitions for different routes:
+
+```svelte
+<script>
+  import { Ssgoi } from '@ssgoi/svelte';
+  import { slide, fade, scale, pinterest } from '@ssgoi/svelte/view-transitions';
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+  const config = {
+    transitions: [
+      // Slide between tabs
+      { from: '/home', to: '/about', transition: slide({ direction: 'left' }) },
+      { from: '/about', to: '/home', transition: slide({ direction: 'right' }) },
+      
+      // Scale up when entering details
+      { from: '/products', to: '/products/*', transition: scale() },
+      
+      // Pinterest-style image transitions
+      { from: '/gallery', to: '/photo/*', transition: pinterest() }
+    ],
+    defaultTransition: fade()
+  };
+</script>
+
+<Ssgoi {config}>
+  <slot />
+</Ssgoi>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+### Symmetric Transitions
+
+Automatically create bidirectional transitions:
 
-## Building
+```svelte
+{
+  from: '/home',
+  to: '/about', 
+  transition: slide({ direction: 'left' }),
+  symmetric: true  // Automatically creates reverse transition
+}
+```
 
-To build your library:
+### Individual Element Animations
 
-```bash
-npm run package
+Animate specific elements during mount/unmount:
+
+```svelte
+<script>
+  import { transition } from '@ssgoi/svelte';
+  import { fadeIn, slideUp } from '@ssgoi/svelte/transitions';
+</script>
+
+<div use:transition={{
+  key: 'card',
+  in: fadeIn(),
+  out: slideUp()
+}}>
+  <h2>Animated Card</h2>
+</div>
 ```
 
-To create a production version of your showcase app:
+## SvelteKit App Example
 
-```bash
-npm run build
+```svelte
+<!-- +layout.svelte -->
+<script>
+  import { Ssgoi } from '@ssgoi/svelte';
+  import { slide } from '@ssgoi/svelte/view-transitions';
+</script>
+
+<Ssgoi config={{
+  defaultTransition: slide({ direction: 'left' })
+}}>
+  <div style="position: relative; min-height: 100vh;">
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/products">Products</a>
+    </nav>
+    <slot />
+  </div>
+</Ssgoi>
+
+<!-- +page.svelte -->
+<script>
+  import { SsgoiTransition } from '@ssgoi/svelte';
+  import { page } from '$app/stores';
+</script>
+
+<SsgoiTransition id={$page.url.pathname}>
+  <!-- Your page content -->
+</SsgoiTransition>
 ```
 
-You can preview the production build with `npm run preview`.
+## API Reference
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+### Components
 
-## Publishing
+#### `<Ssgoi>`
+The provider component that manages transition context.
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+```svelte
+<Ssgoi config={ssgoiConfig}>
+  <slot />
+</Ssgoi>
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+#### `<SsgoiTransition>`
+Wrapper component for pages that should transition.
 
-```bash
-npm publish
+```svelte
+<SsgoiTransition id="/page-id">
+  <slot />
+</SsgoiTransition>
+```
+
+### Actions
+
+#### `use:transition`
+Apply transitions to individual elements.
+
+```svelte
+<div use:transition={{
+  key: 'unique-key',
+  in: fadeIn(),
+  out: fadeOut()
+}}>
+  Content
+</div>
+```
+
+### Stores
+
+#### `transitioning`
+Access transition state.
+
+```svelte
+<script>
+  import { transitioning } from '@ssgoi/svelte';
+</script>
+
+{#if $transitioning}
+  <p>Transitioning...</p>
+{/if}
 ```
+
+## Built-in Transitions
+
+### Page Transitions (`@ssgoi/svelte/view-transitions`)
+- `fade()` - Smooth opacity transition
+- `slide()` - Directional sliding (left/right/up/down)
+- `scale()` - Zoom in/out effect
+- `hero()` - Shared element transitions
+- `pinterest()` - Pinterest-style expand effect
+- `ripple()` - Material Design ripple effect
+
+### Element Transitions (`@ssgoi/svelte/transitions`)
+- `fadeIn()` / `fadeOut()`
+- `slideUp()` / `slideDown()` / `slideLeft()` / `slideRight()`
+- `scaleIn()` / `scaleOut()`
+- `bounce()`
+- `blur()`
+- `rotate()`
+
+## Spring Physics Configuration
+
+All transitions use spring physics for natural motion:
+
+```javascript
+slide({
+  direction: 'left',
+  spring: {
+    stiffness: 300,  // 1-1000, higher = faster
+    damping: 30      // 0-100, higher = less oscillation
+  }
+})
+```
+
+## TypeScript Support
+
+SSGOI is written in TypeScript and provides full type definitions:
+
+```typescript
+import type { SsgoiConfig, TransitionConfig } from '@ssgoi/svelte';
+
+const config: SsgoiConfig = {
+  // Full type safety
+};
+```
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+- All modern mobile browsers
+
+## Performance
+
+- Minimal bundle size (~8kb gzipped)
+- Hardware-accelerated animations
+- Automatic cleanup and memory management
+- Smart preloading for instant transitions
+
+## Documentation
+
+Visit [https://ssgoi.dev](https://ssgoi.dev) for:
+- Complete API reference
+- Interactive examples
+- Advanced patterns
+- Migration guides
+
+## Contributing
+
+We welcome contributions! Please see our [contributing guide](https://github.com/meursyphus/ssgoi/blob/main/CONTRIBUTING.md) for details.
+
+## License
+
+MIT © [MeurSyphus](https://github.com/meursyphus)

package/dist/context.js

@@ -1,10 +1,10 @@
 import { getContext, setContext } from 'svelte';
-const SSGOI_CONTEXT_KEY = Symbol('ssgoi');
+var SSGOI_CONTEXT_KEY = Symbol('ssgoi');
 export function setSsgoiContext(context) {
     setContext(SSGOI_CONTEXT_KEY, context);
 }
 export function getSsgoiContext() {
-    const context = getContext(SSGOI_CONTEXT_KEY);
+    var context = getContext(SSGOI_CONTEXT_KEY);
     if (!context) {
         throw new Error('getSsgoiContext must be called within Ssgoi component');
     }

package/dist/presets/index.d.ts

@@ -0,0 +1 @@
+export * from "@ssgoi/core/presets";

package/dist/presets/index.js

@@ -0,0 +1 @@
+export * from "@ssgoi/core/presets";

package/dist/transition.d.ts

@@ -1,8 +1,8 @@
 import { type Transition, type TransitionKey } from "@ssgoi/core";
-export declare const transition: (node: HTMLElement, params: Transition & {
+export declare const transition: <TAnimationValue = number>(node: HTMLElement, params: Transition<undefined, TAnimationValue> & {
     key: TransitionKey;
 }) => {
-    update(newParams: Transition & {
+    update(newParams: Transition<undefined, TAnimationValue> & {
         key: TransitionKey;
     }): void;
     destroy(): void;

package/dist/transition.js

@@ -1,13 +1,13 @@
 import { transition as _transition, } from "@ssgoi/core";
-export const transition = (node, params) => {
-    let callback = _transition({
+export var transition = function (node, params) {
+    var callback = _transition({
         key: params.key,
         in: params.in,
         out: params.out,
     });
-    let cleanup = callback(node);
+    var cleanup = callback(node);
     return {
-        update(newParams) {
+        update: function (newParams) {
             callback = _transition({
                 key: newParams.key,
                 in: newParams.in,
@@ -15,8 +15,8 @@ export const transition = (node, params) => {
             });
             cleanup = callback(node);
         },
-        destroy() {
-            cleanup?.();
+        destroy: function () {
+            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
         },
     };
 };

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "0.0.6",
+  "version": "2.0.0",
+  "description": "Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit applications",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
-  "sideEffects": [
-    "**/*.css"
-  ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@ssgoi/core": "0.0.1"
+    "@ssgoi/core": "2.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -39,8 +40,29 @@
     "vite": "^6.2.6"
   },
   "keywords": [
-    "svelte"
+    "svelte",
+    "page-transition",
+    "animation",
+    "ssgoi",
+    "spring-physics"
   ],
+  "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meursyphus/ssgoi.git",
+    "directory": "packages/svelte"
+  },
+  "homepage": "https://ssgoi.dev",
+  "bugs": {
+    "url": "https://github.com/meursyphus/ssgoi/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -57,10 +79,14 @@
     "./types": {
       "types": "./dist/types.d.ts",
       "import": "./dist/types.js"
+    },
+    "./presets": {
+      "types": "./dist/presets/index.d.ts",
+      "import": "./dist/presets/index.js"
     }
   },
   "scripts": {
-    "build2": "svelte-kit sync && svelte-package && publint",
+    "dev": "svelte-package --watch",
     "build": "svelte-package",
     "format": "prettier --write .",
     "lint": "prettier --check . && eslint ."