feat: support canvans 2d for cache (#6367)

* feat: support canvans 2d for cache * fix: image src hydrate * chore: update lock * fix: img not match when ssr * fix: canvas dispalay * chore: remove runtime * chore: add event for taobao * chore: add window.WindVane * chore: add declare * chore: add changeset * feat: add cacheCanvasToStorage to ref * chore: modify function * feat: add @ice/cache-canvas * feat: replace mounted * chore: add dependence to useCallback * chore: add try to Storage * chore: import CacheCanvas from ice in example * chore: add changeset * chore: add conment * feat: add rendered * feat: add getSnapshot * feat: modify * chore: add import meta * chore: add CacheCanvasProps
alibaba · Jul 17, 2023 · 018238f · 018238f
1 parent cf8a78e
commit 018238f
Show file tree

Hide file tree

Showing 25 changed files with 600 additions and 7 deletions.
diff --git a/.changeset/dry-rockets-exist.md b/.changeset/dry-rockets-exist.md
@@ -0,0 +1,5 @@
+---
+'@ice/cache-canvas': patch
+---
+
+feat: support cache of 2d cavans
diff --git a/.changeset/tough-lobsters-attend.md b/.changeset/tough-lobsters-attend.md
@@ -0,0 +1,5 @@
+---
+'@ice/plugin-canvas': patch
+---
+
+feat: support cache of 2d cavans
diff --git a/examples/cavans-project/.browserslistrc b/examples/cavans-project/.browserslistrc
@@ -0,0 +1,2 @@
+defaults
+ios_saf 9
diff --git a/examples/cavans-project/ice.config.mts b/examples/cavans-project/ice.config.mts
@@ -0,0 +1,10 @@
+import { defineConfig } from '@ice/app';
+import canvasPlugin from '@ice/plugin-canvas';
+
+export default defineConfig(() => ({
+  plugins: [
+    canvasPlugin(),
+  ],
+  ssr: true,
+  ssg: false,
+}));
diff --git a/examples/cavans-project/package.json b/examples/cavans-project/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@examples/canvas-project",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-canvas": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@ice/cache-canvas": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "webpack": "^5.86.0"
+  }
+}
diff --git a/examples/cavans-project/src/app.tsx b/examples/cavans-project/src/app.tsx
@@ -0,0 +1,3 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig(() => ({}));
diff --git a/examples/cavans-project/src/components/bar.tsx b/examples/cavans-project/src/components/bar.tsx
@@ -0,0 +1,7 @@
+export default function Bar() {
+  return (
+    <div>
+      bar
+    </div>
+  );
+}
diff --git a/examples/cavans-project/src/document.tsx b/examples/cavans-project/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/cavans-project/src/pages/home.tsx b/examples/cavans-project/src/pages/home.tsx
@@ -0,0 +1,65 @@
+import { definePageConfig, CacheCanvas } from 'ice';
+import { useRef } from 'react';
+import styles from './index.module.css';
+
+export type RefCacheCanvas = {
+  cacheCanvasToStorage: () => void;
+};
+
+const GAME_CANVAS_ID = 'canvas-id';
+
+export default function Home() {
+  const childRef = useRef<RefCacheCanvas>();
+  const initFunc = () => {
+    return new Promise((resolve) => {
+      const canvas: HTMLCanvasElement | null = document.getElementById(GAME_CANVAS_ID) as HTMLCanvasElement;
+      if (canvas && typeof canvas.getContext === 'function') {
+        let ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
+
+        ctx?.fillRect(25, 25, 100, 100);
+        ctx?.clearRect(45, 45, 60, 60);
+        ctx?.strokeRect(50, 50, 50, 50);
+      }
+
+      setTimeout(() => {
+        console.log('canvas paint ready!');
+        resolve(true);
+      }, 5000);
+    });
+  };
+  return (
+    <>
+      <h2 className={styles.title}>Home Page</h2>
+      <CacheCanvas
+        ref={childRef}
+        id={GAME_CANVAS_ID}
+        init={initFunc}
+        fallback={() => <div>fallback</div>}
+      />
+      <button
+        style={{ display: 'block' }}
+        onClick={() => {
+          console.log('active cache!');
+          childRef.current?.cacheCanvasToStorage();
+        }}
+      >cache canvas</button>
+    </>
+  );
+}
+
+export const pageConfig = definePageConfig(() => {
+  return {
+    title: 'Home',
+    meta: [
+      {
+        name: 'theme-color',
+        content: '#000',
+      },
+      {
+        name: 'title-color',
+        content: '#f00',
+      },
+    ],
+    auth: ['admin'],
+  };
+});
diff --git a/examples/cavans-project/src/pages/ice.png b/examples/cavans-project/src/pages/ice.png
diff --git a/examples/cavans-project/src/pages/index.module.css b/examples/cavans-project/src/pages/index.module.css
@@ -0,0 +1,3 @@
+.title {
+  color: red;
+}
diff --git a/examples/cavans-project/src/types.ts b/examples/cavans-project/src/types.ts
@@ -0,0 +1,3 @@
+export interface AppData {
+  title: string;
+}
diff --git a/examples/cavans-project/src/typings.d.ts b/examples/cavans-project/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/cavans-project/tsconfig.json b/examples/cavans-project/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/packages/cache-canvas/README.md b/packages/cache-canvas/README.md
@@ -0,0 +1,46 @@
+# @ice/cache-canvas
+
+React component for supporting canvas for cache.
+
+## Usage
+
+```bash
+npm i @ice/cache-canvas -S
+```
+
+```jsx
+import MainGame from './game'; // eva.js 的封装
+
+const GAME_CANVAS = 'game-canvas';
+
+export default (props) => {
+  useEffect(() => {
+    const gameEl = document.getElementById(GAME_CANVAS);
+    new MainGame(gameEl, getGameHeight());
+  }, []);
+
+  const init = () => {
+     return new Promise((resolve) => {
+      const canvas: HTMLCanvasElement | null = document.getElementById(GAME_CANVAS_ID) as HTMLCanvasElement;
+      if (canvas && typeof canvas.getContext === 'function') {
+        let ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
+
+        ctx?.fillRect(25, 25, 100, 100);
+        ctx?.clearRect(45, 45, 60, 60);
+        ctx?.strokeRect(50, 50, 50, 50);
+      }
+
+      setTimeout(() => {
+        console.log('canvas paint ready!');
+        resolve(true);
+      }, 5000);
+    });
+  }
+
+  return (
+    <>
+       <CanvasCache id={GAME_CANVAS} useCache={false} init={init} />
+    </>
+  );
+};
+```
diff --git a/packages/cache-canvas/package.json b/packages/cache-canvas/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@ice/cache-canvas",
+  "version": "0.0.8",
+  "description": "",
+  "main": "./esm/index.js",
+  "types": "./esm/index.d.ts",
+  "scripts": {
+    "watch": "tsc -w",
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "universal-env": "^3.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}