feat: add @unlazy/solid package

johannschopplich · Apr 20, 2023 · 750723f · 750723f
1 parent 0e65a85
commit 750723f
Show file tree

Hide file tree

Showing 17 changed files with 374 additions and 15 deletions.
diff --git a/packages/react/playground/App.tsx b/packages/react/playground/App.tsx
@@ -2,17 +2,13 @@ import { LazyImage } from '../src'
 
 function App() {
   return (
-    <>
-      <div>
-        <LazyImage
-          blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
-          autoSizes={true}
-          data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
-          width="640"
-          height="640"
-        />
-      </div>
-    </>
+    <LazyImage
+      blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+      autoSizes={true}
+      data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+      width="640"
+      height="640"
+    />
   )
 }
 

diff --git a/packages/react/playground/index.html b/packages/react/playground/index.html
@@ -6,7 +6,7 @@
     <title>@unlazy/react</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="app"></div>
     <script type="module" src="/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/react/playground/main.tsx b/packages/react/playground/main.tsx
@@ -2,7 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+const app = document.getElementById('app')!
+
+ReactDOM.createRoot(app).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

diff --git a/packages/react/playground/package.json b/packages/react/playground/package.json
@@ -1,6 +1,5 @@
 {
   "type": "module",
-  "version": "0.4.4",
   "private": true,
   "scripts": {
     "dev": "vite",

diff --git a/packages/solid/build.config.ts b/packages/solid/build.config.ts
@@ -0,0 +1,15 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: ['src/index'],
+  clean: true,
+  declaration: true,
+  externals: ['react', 'react-dom'],
+  rollup: {
+    emitCJS: true,
+    inlineDependencies: true,
+    resolve: {
+      extensions: ['.ts', '.tsx'],
+    },
+  },
+})
diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@unlazy/solid",
+  "version": "0.4.4",
+  "packageManager": "[email protected]",
+  "description": "Solid lazy loading library for placeholder images",
+  "author": "Johann Schopplich <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://unlazy.byjohann.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johannschopplich/unlazy.git",
+    "directory": "packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/johannschopplich/unlazy/issues"
+  },
+  "keywords": [
+    "async",
+    "image",
+    "intersection",
+    "lazy",
+    "loading",
+    "lozad",
+    "native",
+    "observer",
+    "responsive",
+    "react"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "dev": "pnpm -C playground run dev",
+    "dev:build": "pnpm -C playground run build",
+    "test:types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "fast-blurhash": "^1.1.2",
+    "solid-js": "^1.7.3"
+  },
+  "dependencies": {
+    "unlazy": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.12",
+    "fast-blurhash": "^1.1.2",
+    "solid-js": "^1.7.3",
+    "vite-plugin-solid": "^2.7.0"
+  }
+}
diff --git a/packages/solid/playground/App.tsx b/packages/solid/playground/App.tsx
@@ -0,0 +1,16 @@
+/* @refresh granular */
+import { LazyImage } from '../src'
+
+function App() {
+  return (
+    <LazyImage
+      blurhash="LKO2:N%2Tw=w]~RBVZRi};RPxuwH"
+      autoSizes={true}
+      data-srcset="image-320w.jpg 320w, image-640w.jpg 640w"
+      width="640"
+      height="640"
+    />
+  )
+}
+
+export default App
diff --git a/packages/solid/playground/index.html b/packages/solid/playground/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@unlazy/solid</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/solid/playground/main.tsx b/packages/solid/playground/main.tsx
@@ -0,0 +1,7 @@
+import { render } from 'solid-js/web'
+import App from './App'
+
+const app = document.getElementById('app')
+
+if (app)
+  render(() => <App />, app)
diff --git a/packages/solid/playground/package.json b/packages/solid/playground/package.json
@@ -0,0 +1,9 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
diff --git a/packages/solid/playground/vite-env.d.ts b/packages/solid/playground/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/solid/playground/vite.config.ts b/packages/solid/playground/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})
diff --git a/packages/solid/src/index.tsx b/packages/solid/src/index.tsx
@@ -0,0 +1,38 @@
+import { createEffect, createSignal, onCleanup } from 'solid-js'
+import { lazyLoad } from 'unlazy'
+import type { UnLazyLoadOptions } from 'unlazy'
+import type { JSX } from 'solid-js'
+
+interface Props
+  extends JSX.ImgHTMLAttributes<HTMLImageElement>,
+  Pick<UnLazyLoadOptions, 'blurhashSize'> {
+  autoSizes?: boolean
+  blurhash?: string
+}
+
+export function LazyImage(props: Props) {
+  const [target, setTarget] = createSignal<HTMLImageElement | null>(null)
+
+  createEffect(() => {
+    const currentTarget = target()
+    if (currentTarget) {
+      const cleanup = lazyLoad(currentTarget, {
+        blurhash: props.blurhash,
+        blurhashSize: props.blurhashSize,
+      })
+
+      onCleanup(() => {
+        cleanup()
+      })
+    }
+  })
+
+  return (
+    <img
+      ref={setTarget}
+      data-sizes={props.autoSizes ? 'auto' : undefined}
+      loading="lazy"
+      {...props}
+    />
+  )
+}
diff --git a/packages/solid/tsconfig.json b/packages/solid/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    /* Limit global types to those in the current package */
+    "typeRoots": ["./node_modules/@types"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  },
+  "include": ["src", "playground"],
+  "exclude": ["**/dist"]
+}
diff --git a/packages/unlazy/package.json b/packages/unlazy/package.json
@@ -9,7 +9,8 @@
   "homepage": "https://unlazy.byjohann.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/johannschopplich/unlazy.git"
+    "url": "git+https://github.com/johannschopplich/unlazy.git",
+    "directory": "packages/unlazy"
   },
   "bugs": {
     "url": "https://github.com/johannschopplich/unlazy/issues"