📦 1.1.3

.github/workflows/main.yml

@@ -33,12 +33,16 @@ jobs:
 
   test-action:
     runs-on: ubuntu-latest
-    needs: build-docker-image
-
     steps:
+      - uses: actions/checkout@v2
+
+      - name: update action.yml to use image from local Dockerfile
+        run: |
+          sed -i "s/image: .*/image: Dockerfile/" action.yml
+
       - name: generate-snake-game-from-github-contribution-grid
-        id: snake-gif
-        uses: Platane/snk@master
+        id: generate-snake
+        uses: ./
         with:
           github_user_name: platane
           gif_out_path: dist/github-contribution-grid-snake.gif
@@ -46,15 +50,16 @@ jobs:
 
       - name: ensure the generated file exists
         run: |
-          ls -l ${{ steps.snake-gif.outputs.gif_out_path }}
-          test -f ${{ steps.snake-gif.outputs.gif_out_path }}
+          ls dist
+          test -f ${{ steps.generate-snake.outputs.gif_out_path }}
+          test -f ${{ steps.generate-snake.outputs.svg_out_path }}
 
       - uses: crazy-max/ghaction-github-pages@v2.5.0
         with:
           target_branch: output
           build_dir: dist
         env:
-          GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN_GH_PAGES }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   deploy-ghpages:
     runs-on: ubuntu-latest
@@ -70,41 +75,10 @@ jobs:
         env:
           GITHUB_USER_CONTRIBUTION_API_ENDPOINT: https://snk-one.vercel.app/api/github-user-contribution/
 
-      - uses: crazy-max/ghaction-github-pages@v2.5.0
+      - uses: crazy-max/ghaction-github-pages@v2.6.0
         if: success() && github.ref == 'refs/heads/master'
         with:
           target_branch: gh-pages
           build_dir: packages/demo/dist
         env:
           GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN_GH_PAGES }}
-
-  build-docker-image:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          cache: yarn
-          node-version: 16
-      - run: yarn install --frozen-lockfile
-
-      - run: yarn build:action
-
-      - uses: docker/setup-qemu-action@v1
-
-      - uses: docker/setup-buildx-action@v1
-
-      - uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - uses: docker/build-push-action@v2
-        id: docker_build
-        with:
-          push: ${{ github.ref == 'refs/heads/master' }}
-          tags: |
-            platane/snk:latest
-            platane/snk:${{ github.sha }}
-          file: packages/action/Dockerfile
-          context: packages/action

.github/workflows/release.yml

@@ -0,0 +1,85 @@
+name: release
+
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version"
+        default: "0.0.1"
+        required: true
+        type: string
+      description:
+        description: "Version description"
+        type: string
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: docker/setup-qemu-action@v1
+
+      - uses: docker/setup-buildx-action@v1
+
+      - uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: build and publish the docker image
+        uses: docker/build-push-action@v2
+        id: docker-build
+        with:
+          push: true
+          tags: |
+            platane/snk:${{ github.sha }}
+            platane/snk:${{ github.event.inputs.version }}
+
+      - name: update action.yml to point to the newly created docker image
+        run: |
+          sed -i "s/image: .*/image: docker:\/\/platane\/snk@${{ steps.docker-build.outputs.digest }}/" action.yml
+
+      - uses: actions/setup-node@v2
+        with:
+          cache: yarn
+          node-version: 16
+
+      - name: build svg-only action
+        run: |
+          yarn install --frozen-lockfile
+          yarn build:action
+          rm -r svg-only/dist
+          mv packages/action/dist svg-only/dist
+
+      - name: bump package version
+        run: yarn version --no-git-tag-version --new-version ${{ github.event.inputs.version }}
+
+      - name: push new build, tag version and push
+        id: push-tags
+        run: |
+          VERSION=${{ github.event.inputs.version }}
+
+          git config --global user.email "bot@platane.me"
+          git config --global user.name "release bot"
+          git add package.json svg-only/dist action.yml
+          git commit -m "📦 $VERSION"
+          git tag v$VERSION
+          git push origin master --tags
+
+          if [[ "$VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            git tag v$( echo $VERSION | cut -d. -f 1-1 )
+            git tag v$( echo $VERSION | cut -d. -f 1-2 )
+            git push origin --tags --force
+            echo ::set-output name=prerelease::false
+          else 
+            echo ::set-output name=prerelease::true
+          fi
+
+      - uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ github.event.inputs.version }}
+          body: ${{ github.event.inputs.description }}
+          prerelease: ${{ steps.push-tags.outputs.prerelease }}

.gitignore

@@ -2,4 +2,5 @@ node_modules
 npm-debug.log*
 yarn-error.log*
 dist
+!svg-only/dist
 build

Dockerfile

@@ -0,0 +1,32 @@
+FROM node:16-slim as builder
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+COPY tsconfig.json ./
+
+COPY packages packages
+
+RUN export YARN_CACHE_FOLDER="$(mktemp -d)" \
+    && yarn install --frozen-lockfile \
+    && rm -r "$YARN_CACHE_FOLDER"
+
+RUN yarn build:action
+
+
+
+
+
+FROM node:16-slim
+
+WORKDIR /action-release
+
+RUN export YARN_CACHE_FOLDER="$(mktemp -d)" \
+    && yarn add canvas@2.9.1 gifsicle@5.3.0 --no-lockfile \
+    && rm -r "$YARN_CACHE_FOLDER"
+
+COPY --from=builder /app/packages/action/dist/ /action-release/
+
+CMD ["node", "/action-release/index.js"]
+

README.md

@@ -1,5 +1,6 @@
 # snk
 
+[![GitHub release](https://img.shields.io/github/release/platane/snk.svg?style=flat-square)](https://github.com/platane/snk/releases/latest)
 [![GitHub marketplace](https://img.shields.io/badge/marketplace-snake-blue?logo=github&style=flat-square)](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)
 ![type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)
 ![code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)
@@ -20,7 +21,7 @@ Available as github action. Automatically generate a new image at the end of the
 **github action**
 
 ```yaml
-- uses: Platane/snk@master
+- uses: Platane/snk@v1.1.0
   with:
     # github user name to read the contribution graph from (**required**)
     # using action context var `github.repository_owner` or specified user
@@ -35,7 +36,9 @@ Available as github action. Automatically generate a new image at the end of the
     svg_out_path: dist/github-snake.svg
 ```
 
-> [example with cron job](https://github.com/Platane/Platane/blob/master/.github/workflows/main.yml#L24-L29)
+[example with cron job](https://github.com/Platane/Platane/blob/master/.github/workflows/main.yml#L24-L29)
+
+If you are only interested in generating a svg, you can use this other faster action: `uses: Platane/snk/svg-only@v1.1.0`
 
 **interactive demo**
 

action.yml

@@ -3,8 +3,8 @@ description: "Generates a snake game from a github user contributions grid. Outp
 author: "platane"
 
 runs:
-  using: "docker"
-  image: "docker://platane/snk:latest"
+  using: docker
+  image: docker://platane/snk@sha256:74d02183a9a4adb8e00d9f50e6eb5035a5b6ef02644d848363ef3301235ebd1d
 
 inputs:
   github_user_name:

package.json

@@ -1,23 +1,23 @@
 {
   "name": "snk",
   "description": "Generates a snake game from a github user contributions grid",
-  "version": "1.0.0",
+  "version": "1.1.3",
   "private": true,
   "repository": "github:platane/snk",
   "devDependencies": {
     "@types/jest": "27.4.1",
     "@types/node": "16.11.7",
     "jest": "27.5.1",
-    "prettier": "2.6.0",
-    "ts-jest": "27.1.3",
-    "typescript": "4.6.2"
+    "prettier": "2.6.2",
+    "ts-jest": "27.1.4",
+    "typescript": "4.6.3"
   },
   "workspaces": [
     "packages/**"
   ],
   "scripts": {
     "type": "tsc --noEmit",
-    "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/*/dist/**'",
+    "lint": "yarn prettier -c '**/*.{ts,js,json,md,yml,yaml}' '!packages/*/dist/**' '!svg-only/dist/**'",
     "test": "jest --verbose --passWithNoTests --no-cache",
     "dev:demo": "( cd packages/demo ; yarn dev )",
     "build:demo": "( cd packages/demo ; yarn build )",

packages/action/Dockerfile

@@ -1,9 +0,0 @@
-FROM node:16-slim
-
-WORKDIR /github/snk
-
-RUN    npm install canvas@2.8.0 gifsicle@5.2.0 --no-save --no-package-lock
-
-COPY   dist /github/snk/
-
-CMD    ["node", "/github/snk/index.js"]

packages/action/generateContributionSnake.ts

@@ -1,8 +1,6 @@
 import { getGithubUserContribution } from "@snk/github-user-contribution";
 import { userContributionToGrid } from "./userContributionToGrid";
 import { getBestRoute } from "@snk/solver/getBestRoute";
-import { createGif } from "@snk/gif-creator";
-import { createSvg } from "../svg-creator";
 import { snake4 } from "@snk/types/__fixtures__/snake";
 import { getPathToPose } from "@snk/solver/getPathToPose";
 
@@ -41,11 +39,13 @@ export const generateContributionSnake = async (
 
   if (format.gif) {
     console.log("📹 creating gif");
+    const { createGif } = await import("@snk/gif-creator");
     output.gif = await createGif(grid, chain, drawOptions, gifOptions);
   }
 
   if (format.svg) {
     console.log("🖌 creating svg");
+    const { createSvg } = await import("@snk/svg-creator");
     output.svg = createSvg(grid, chain, drawOptions, gifOptions);
   }
 

packages/action/package.json

@@ -4,10 +4,13 @@
   "dependencies": {
     "@actions/core": "1.6.0",
     "@snk/gif-creator": "1.0.0",
-    "@snk/github-user-contribution": "1.0.0"
+    "@snk/github-user-contribution": "1.0.0",
+    "@snk/solver": "1.0.0",
+    "@snk/svg-creator": "1.0.0",
+    "@snk/types": "1.0.0"
   },
   "devDependencies": {
-    "@zeit/ncc": "0.22.3",
+    "@vercel/ncc": "0.24.1",
     "ts-node": "10.7.0"
   },
   "scripts": {

packages/demo/demo.interactive.ts

@@ -1,18 +1,17 @@
-import { getBestRoute } from "@snk/solver/getBestRoute";
 import { Color, copyGrid, Grid } from "@snk/types/grid";
 import { step } from "@snk/solver/step";
 import { isStableAndBound, stepSpring } from "./springUtils";
-import { Res } from "@snk/github-user-contribution";
-import { Snake } from "@snk/types/snake";
+import type { Res } from "@snk/github-user-contribution";
+import type { Snake } from "@snk/types/snake";
 import {
   drawLerpWorld,
   getCanvasWorldSize,
   Options,
 } from "@snk/draw/drawWorld";
-import { userContributionToGrid } from "../action/userContributionToGrid";
-import { snake4 as snake } from "@snk/types/__fixtures__/snake";
-import { getPathToPose } from "@snk/solver/getPathToPose";
-import { createSvg } from "../svg-creator";
+import { userContributionToGrid } from "@snk/action/userContributionToGrid";
+import { createSvg } from "@snk/svg-creator";
+import { createRpcClient } from "./worker-utils";
+import type { API as WorkerAPI } from "./demo.interactive.worker";
 
 const createForm = ({
   onSubmit,
@@ -47,15 +46,24 @@ const createForm = ({
 
   form.addEventListener("submit", (event) => {
     event.preventDefault();
-    onSubmit(input.value).catch((err) => {
-      label.innerText = "error :(";
-      throw err;
-    });
+
+    onSubmit(input.value)
+      .finally(() => {
+        clearTimeout(timeout);
+      })
+      .catch((err) => {
+        label.innerText = "error :(";
+        throw err;
+      });
 
     input.disabled = true;
     submit.disabled = true;
     form.appendChild(label);
     label.innerText = "loading ...";
+
+    const timeout = setTimeout(() => {
+      label.innerText = "loading ( it might take a while ) ... ";
+    }, 5000);
   });
 
   //
@@ -75,6 +83,7 @@ const createGithubProfile = () => {
   container.style.opacity = "0";
   container.style.display = "flex";
   container.style.flexDirection = "column";
+  container.style.height = "120px";
   container.style.alignItems = "flex-start";
   const image = document.createElement("img");
   image.style.width = "100px";
@@ -232,13 +241,24 @@ const onSubmit = async (userName: string) => {
   };
 
   const grid = userContributionToGrid(cells, colorScheme);
-  const chain = getBestRoute(grid, snake)!;
-  chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
+
+  const chain = await getChain(grid);
+
   dispose();
 
   createViewer({ grid0: grid, chain, drawOptions });
 };
 
+const worker = new Worker(
+  new URL(
+    "./demo.interactive.worker.ts",
+    // @ts-ignore
+    import.meta.url
+  )
+);
+
+const { getChain } = createRpcClient<WorkerAPI>(worker);
+
 const profile = createGithubProfile();
 const { dispose } = createForm({
   onSubmit,

packages/demo/demo.interactive.worker.ts

@@ -0,0 +1,17 @@
+import { getBestRoute } from "@snk/solver/getBestRoute";
+import { getPathToPose } from "@snk/solver/getPathToPose";
+import { snake4 as snake } from "@snk/types/__fixtures__/snake";
+import type { Grid } from "@snk/types/grid";
+import { createRpcServer } from "./worker-utils";
+
+const getChain = (grid: Grid) => {
+  const chain = getBestRoute(grid, snake)!;
+  chain.push(...getPathToPose(chain.slice(-1)[0], snake)!);
+
+  return chain;
+};
+
+const api = { getChain };
+export type API = typeof api;
+
+createRpcServer(api);

packages/demo/demo.svg.ts

@@ -1,6 +1,6 @@
 import "./menu";
 import { getBestRoute } from "@snk/solver/getBestRoute";
-import { createSvg } from "../svg-creator";
+import { createSvg } from "@snk/svg-creator";
 import { grid, snake } from "./sample";
 import { drawOptions } from "./canvas";
 import { getPathToPose } from "@snk/solver/getPathToPose";

packages/demo/package.json

@@ -2,20 +2,22 @@
   "name": "@snk/demo",
   "version": "1.0.0",
   "dependencies": {
+    "@snk/action": "1.0.0",
     "@snk/draw": "1.0.0",
+    "@snk/github-user-contribution": "1.0.0",
     "@snk/solver": "1.0.0",
-    "canvas": "2.9.1",
-    "gifsicle": "5.3.0"
+    "@snk/svg-creator": "1.0.0",
+    "@snk/types": "1.0.0"
   },
   "devDependencies": {
     "@types/dat.gui": "0.7.7",
-    "dat.gui": "0.7.7",
+    "dat.gui": "0.7.9",
     "html-webpack-plugin": "5.5.0",
-    "ts-loader": "9.2.6",
+    "ts-loader": "9.2.8",
     "ts-node": "10.7.0",
-    "webpack": "5.70.0",
+    "webpack": "5.72.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.7.4"
+    "webpack-dev-server": "4.8.1"
   },
   "scripts": {
     "build": "webpack",

packages/demo/worker-utils.ts

@@ -0,0 +1,59 @@
+type API = Record<string, (...args: any[]) => any>;
+
+const symbol = "worker-rpc__";
+
+export const createRpcServer = (api: API) =>
+  self.addEventListener("message", async (event) => {
+    if (event.data?.symbol === symbol) {
+      try {
+        const res = await api[event.data.methodName](...event.data.args);
+        self.postMessage({ symbol, key: event.data.key, res });
+      } catch (error: any) {
+        postMessage({ symbol, key: event.data.key, error: error.message });
+      }
+    }
+  });
+
+export const createRpcClient = <API_ extends API>(worker: Worker) => {
+  const originalTerminate = worker.terminate;
+  worker.terminate = () => {
+    worker.dispatchEvent(new Event("terminate"));
+    originalTerminate.call(worker);
+  };
+
+  return new Proxy(
+    {} as {
+      [K in keyof API_]: (
+        ...args: Parameters<API_[K]>
+      ) => Promise<Awaited<ReturnType<API_[K]>>>;
+    },
+    {
+      get:
+        (_, methodName) =>
+        (...args: any[]) =>
+          new Promise((resolve, reject) => {
+            const key = Math.random().toString();
+
+            const onTerminate = () => {
+              worker.removeEventListener("terminate", onTerminate);
+              worker.removeEventListener("message", onMessageHandler);
+              reject(new Error("worker terminated"));
+            };
+
+            const onMessageHandler = (event: MessageEvent) => {
+              if (event.data?.symbol === symbol && event.data.key === key) {
+                if (event.data.error) reject(event.data.error);
+                else if (event.data.res) resolve(event.data.res);
+
+                worker.removeEventListener("terminate", onTerminate);
+                worker.removeEventListener("message", onMessageHandler);
+              }
+            };
+
+            worker.addEventListener("message", onMessageHandler);
+            worker.addEventListener("terminate", onTerminate);
+            worker.postMessage({ symbol, key, methodName, args });
+          }),
+    }
+  );
+};

packages/gif-creator/package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@types/gifsicle": "5.2.0",
     "@types/tmp": "0.2.3",
-    "@zeit/ncc": "0.22.3"
+    "@vercel/ncc": "0.24.1"
   },
   "scripts": {
     "benchmark": "ncc run __tests__/benchmark.ts --quiet"

packages/github-user-contribution/index.ts

@@ -124,8 +124,6 @@ const getSvgPosition = (
   return p;
 };
 
-type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;
-
-export type Res = ThenArg<ReturnType<typeof getGithubUserContribution>>;
+export type Res = Awaited<ReturnType<typeof getGithubUserContribution>>;
 
 export type Cell = Res["cells"][number];

packages/github-user-contribution/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "dependencies": {
     "cheerio": "1.0.0-rc.10",
-    "node-fetch": "2.6.1"
+    "node-fetch": "2.6.7"
   },
   "devDependencies": {
     "@types/node-fetch": "2.6.1"

packages/svg-creator/grid.ts

@@ -22,8 +22,6 @@ export const createGrid = (
   const styles = [
     `.c{
       shape-rendering: geometricPrecision;
-      rx: ${sizeBorderRadius};
-      ry: ${sizeBorderRadius};
       fill: var(--ce);
       stroke-width: 1px;
       stroke: var(--cb);
@@ -56,6 +54,8 @@ export const createGrid = (
         class: ["c", id].filter(Boolean).join(" "),
         x: x * s + m,
         y: y * s + m,
+        rx: sizeBorderRadius,
+        ry: sizeBorderRadius,
         width: d,
         height: d,
       })

packages/svg-creator/index.ts

@@ -115,6 +115,10 @@ export const createSvg = (
       xmlns: "http://www.w3.org/2000/svg",
     }).replace("/>", ">"),
 
+    "<desc>",
+    "Generated with https://github.com/Platane/snk",
+    "</desc>",
+
     "<style>",
     optimizeCss(style),
     "</style>",

svg-only/README.md

@@ -0,0 +1,9 @@
+# svg-only
+
+Another action running purely on js (without Docker).
+
+As a drawback, it can not generate gif image.
+
+## Build process
+
+dist file are built and push on release, by the release action.

svg-only/action.yml

@@ -0,0 +1,20 @@
+name: "generate-snake-game-from-github-contribution-grid"
+description: "Generates a snake game from a github user contributions grid. Output the animation as svg"
+author: "platane"
+
+runs:
+  using: node16
+  main: dist/index.js
+
+inputs:
+  github_user_name:
+    description: "github user name"
+    required: true
+  svg_out_path:
+    description: "path of the generated svg file. If left empty, the svg file will not be generated."
+    required: false
+    default: null
+
+outputs:
+  svg_out_path:
+    description: "path of the generated svg"

tsconfig.json

@@ -6,7 +6,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "moduleResolution": "node"
   },
   "exclude": ["node_modules"]
 }