update svg paths into single path

.github/workflows/release-alpha.yml

@@ -36,7 +36,7 @@ jobs:
 
       - name: Publish packages
         run: |
-          pnpm --filter "@qr-x/${{ matrix.package }}" exec pnpm version ${{ env.VERSION }}-alpha.${{ env.COMMIT_ID }}
-          pnpm --filter "@qr-x/${{ matrix.package }}" publish --tag alpha --access public --no-git-checks
+          pnpm --filter "@qr-x/${{ matrix.package }}" --filter "[origin/develop]" exec pnpm version ${{ env.VERSION }}-alpha.${{ env.COMMIT_ID }}
+          pnpm --filter "@qr-x/${{ matrix.package }}" --filter "[origin/develop]" publish --tag alpha --access public --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.storybook/main.ts

@@ -1,9 +1,10 @@
 import type { StorybookConfig } from '@storybook/react-vite'
-import { dirname, join } from 'path'
+import path from 'path'
 import { mergeConfig } from 'vite'
 
 const platform = process.env.PLATFORM as string
 
+const $path = path.resolve('packages', platform)
 const modules = {
   vue: '@storybook/vue3-vite',
   react: '@storybook/react-vite',
@@ -12,32 +13,26 @@ const modules = {
   vanilla: '@storybook/html-vite',
 }
 
-function getAbsolutePath(value: string): any {
-  /**
-   * This function is used to resolve the absolute path of a package.
-   * It is needed in projects that use Yarn PnP or are set up within a monorepo.
-   */
-  return dirname(require.resolve(join(value, 'package.json')))
-}
-
 const config: StorybookConfig = {
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
-  ],
-  stories: [`../packages/${platform}/index.stories.@(ts|tsx)`],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  stories: [`${$path}/index.stories.@(ts|tsx)`],
   framework: {
-    name: getAbsolutePath(modules[platform]),
+    name: modules[platform],
     options: {},
   },
   viteFinal: config => {
-    const { dependencies, devDependencies } = require(`../packages/${platform}/package.json`)
-    const $dependencies = Object.entries({ ...dependencies, ...devDependencies })
+    const { devDependencies } = require(`${$path}/package.json`)
+    const alias = Object.entries(devDependencies)
       .filter(([name, value]) => !(value as string).includes('workspace:*'))
       .map(([name]) => name)
-
-    const alias = $dependencies.reduce((resolves, module) => ({ ...resolves, [module]: getAbsolutePath(module) }), {})
+      .reduce(
+        (resolves, module) => ({
+          ...resolves,
+          [module]: path.join($path, 'node_modules', module),
+          'svelte/internal': path.join($path, 'node_modules', 'svelte/src/runtime/internal'),
+        }),
+        {},
+      )
 
     return mergeConfig(config, { resolve: { alias } })
   },

common/stories/index.ts

@@ -57,7 +57,12 @@ export const LinearGradient: Story = {
     data: URL,
     gradient: {
       type: 'linear',
-      colors: ['#f97316', '#f59e0b', '#facc15'],
+      colors: ['#f97316', '#f59e0b', '#facc15', '#f9ff23', '#dfdc80', '#ff0000'],
+    },
+    shapes: {
+      body: 'circle',
+      eyeball: 'leaf',
+      eyeframe: 'leaf',
     },
   },
 }
@@ -76,7 +81,7 @@ export const FillImage: Story = {
   args: {
     data: URL,
     fillImage:
-      'https://images.unsplash.com/photo-1437413646517-e98caade5a58?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      'https://images.unsplash.com/photo-1682687218608-5e2522b04673?q=80&w=2875&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   },
 }
 
@@ -86,8 +91,8 @@ export const renderMultiple = (component: (props: Props) => any) => {
     'https://images.unsplash.com/photo-1704138162406-bc43d5b9ff97?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   ]
   const gradients = [
-    ['#0ea5e9', '#22d3ee'],
-    ['#f97316', '#f59e0b', '#facc15'],
+    ['#0ea5e9', '#22d3ee', '#38f9d7', '#4cfcb3', '#5ffea1'],
+    ['#f97316', '#f59e0b', '#facc15', '#f9d423', '#ffdc80'],
   ]
   return [
     ...images.map(image => component({ data: URL, fillImage: image })),

common/stories/package.json

@@ -3,6 +3,6 @@
   "version": "0.0.2",
   "dependencies": {
     "@qr-x/core": "workspace:*",
-    "@storybook/react": "^7.6.4"
+    "@storybook/react": "^7.6.17"
   }
 }

package.json

@@ -13,24 +13,32 @@
   },
   "dependencies": {
     "@common/tsconfig": "workspace:*",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
-    "@storybook/test": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/html": "^7.6.17",
+    "@storybook/html-vite": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/svelte": "^7.6.17",
+    "@storybook/svelte-vite": "^7.6.17",
+    "@storybook/vue3": "^7.6.17",
+    "@storybook/vue3-vite": "^7.6.17",
     "concurrently": "^8.2.2",
     "eslint": "^8.48.0",
     "prettier": "^3.1.0",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.17",
+    "storybook-solidjs": "^1.0.0-beta.2",
+    "storybook-solidjs-vite": "^1.0.0-beta.2",
     "turbo": "latest",
     "typescript": "^5.3.2",
-    "vite": "^5.0.3"
+    "vite": "^5.1.4"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "husky": "^8.0.0"
+    "husky": "^8.0.0",
+    "vite-plugin-solid": "^2.10.1"
   },
   "engines": {
     "node": ">=20"

packages/core/index.ts

@@ -1,5 +1,6 @@
 import QR from 'qr.js'
 import { bodyShapes, eyeballShapes, eyeframeShapes } from './src/shapes'
+import svgpath from 'svgpath'
 
 type Shapes = {
   body: keyof typeof bodyShapes
@@ -36,11 +37,10 @@ function parseGradient({ id, type = 'linear', colors, ...rest }: Gradient & { id
 
 export function getSVGData({ data, shapes, gradient, fillImage, ...options }: Options) {
   const id = Math.random().toString(36).substring(2, 9)
+  const ids = { image: `image-${id}`, gradient: `gradient-${id}` }
   const $shapes = { body: 'square', eyeball: 'square', eyeframe: 'square', ...shapes } as const
   const { modules } = QR(data, options) as { modules: boolean[][] }
 
-  const ids = { image: `image-${id}`, eyeball: `eyeball-${id}`, eyeframe: `eyeframe-${id}`, gradient: `gradient-${id}` }
-
   const bodyPath = modules
     .map((row, i) =>
       row
@@ -61,29 +61,23 @@ export function getSVGData({ data, shapes, gradient, fillImage, ...options }: Op
     .join('')
     .replace(/([\n]|[ ]{2})/g, '')
 
-  const isMasked = gradient || fillImage
-
   return {
     ids,
-    paths: {
-      body: bodyPath,
-      eyeball: eyeballShapes[$shapes.eyeball],
-      eyeframe: eyeframeShapes[$shapes.eyeframe],
-    },
+    path:
+      bodyPath +
+      `
+    ${eyeballShapes[$shapes.eyeball]} 
+    ${eyeframeShapes[$shapes.eyeframe]}
 
-    fills: {
-      /* not used */
-      rect: `url('#${gradient ? ids.gradient : ids.image}')`, // Note the only check gradient. Don't swap the condition with fillImage exist.
-      path: isMasked ? 'white' : 'currentColor', // Note! don't change white to any color.
-    },
+
+    ${svgpath(eyeballShapes[$shapes.eyeball]).matrix([1, 0, 0, -1, 0, modules.length]).toString()}
+    ${svgpath(eyeframeShapes[$shapes.eyeframe]).matrix([1, 0, 0, -1, 0, modules.length]).toString()}
+
+    ${svgpath(eyeballShapes[$shapes.eyeball]).matrix([-1, 0, 0, 1, modules.length, 0]).toString()}
+    ${svgpath(eyeframeShapes[$shapes.eyeframe]).matrix([-1, 0, 0, 1, modules.length, 0]).toString()} 
+
+  `,
     length: modules.length,
-    markers: [
-      { x: 0, y: 0 },
-      { x: -modules.length, y: 0, transform: 'scale(-1 1)' },
-      { x: 0, y: -modules.length, transform: 'scale(1 -1)' },
-    ],
-    isMasked /* not used */,
-    eyeItems: ['eyeball', 'eyeframe'] as const,
     gradient: gradient ? parseGradient({ id: ids.gradient, ...gradient }) : undefined,
   }
 }

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qr-x/core",
   "license": "MIT",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -13,6 +13,11 @@
     "qr",
     "code"
   ],
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.esm.js",
+    "default": "./dist/index.cjs.js"
+  },
   "scripts": {
     "build": "rm -rf dist && pnpm build:dts && pnpm build:esm && pnpm build:cjs",
     "build:dts": "tsc -p tsconfig.build.json --outDir ./dist",
@@ -24,7 +29,8 @@
     "watch:cjs": "esbuild index.ts --bundle --watch --packages=external --format=cjs --outfile=./dist/index.cjs.js"
   },
   "dependencies": {
-    "qr.js": "^0.0.0"
+    "qr.js": "^0.0.0",
+    "svgpath": "2.3.0"
   },
   "devDependencies": {
     "@common/tsconfig": "workspace:*",

packages/react/index.tsx

@@ -4,7 +4,7 @@ import React, { SVGAttributes } from 'react'
 type Props = Options & SVGAttributes<SVGSVGElement>
 
 export default function QRX({ data, level, shapes, gradient: $gradient, fillImage, ...rest }: Props) {
-  const { ids, fills, paths, length, markers, gradient, eyeItems, isMasked } = getSVGData({
+  const { ids, path, length, gradient } = getSVGData({
     data,
     level,
     shapes,
@@ -13,21 +13,13 @@ export default function QRX({ data, level, shapes, gradient: $gradient, fillImag
   })
 
   return (
-    <svg {...rest} viewBox={`0 0 ${length} ${length}`}>
-      <g fill={gradient || fillImage ? `url(#${gradient ? `pattern-${gradient?.attributes.id}` : ids.image})` : 'currentColor'}>
-        {eyeItems.map(item =>
-          markers.map((marker, index) => (
-            <use key={`${item}-${index}`} href={`#${ids[item]}`} xlinkHref={`#${ids[item]}`} {...marker} />
-          )),
-        )}
-        <path d={paths.body} />
-      </g>
+    <svg width='100%' {...rest} viewBox={`0 0 ${length} ${length}`}>
+      <path
+        d={path}
+        fill={gradient || fillImage ? `url(#${gradient ? `${gradient?.attributes.id}` : ids.image})` : 'currentColor'}
+      />
 
       <defs>
-        {eyeItems.map(item => (
-          <path key={item} id={ids[item]} d={paths[item]} />
-        ))}
-
         {gradient
           ? // Warning: Keep as React.createElement bec React must be imported in the output bundle. Just using import React from 'react' is risky coz the editor will remove unused deps.
             React.createElement(
@@ -43,18 +35,12 @@ export default function QRX({ data, level, shapes, gradient: $gradient, fillImag
                   width='100%'
                   height='100%'
                   href={fillImage}
-                  xlinkHref={fillImage}
+                  xlinkHref={fillImage} // !Note: Must use both href and xlinkHref to link a source
                   preserveAspectRatio='xMidYMid slice'
                 />
               </pattern>
             )}
-
-        <pattern id={`pattern-${gradient?.attributes.id}`} patternUnits='userSpaceOnUse' width='100%' height='100%'>
-          <rect x='0' y='0' width='100%' height='100%' fill={`url(#${gradient?.attributes.id})`} />
-        </pattern>
       </defs>
     </svg>
   )
 }
-
-// !Note: Must use both href and xlinkHref to link a source

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qr-x/react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "",
   "main": "dist/index.cjs.js",
@@ -26,8 +26,7 @@
   "devDependencies": {
     "@common/stories": "workspace:*",
     "@common/tsconfig": "workspace:*",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
+    "@storybook/react": "^7.6.17",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",
     "esbuild": "^0.19.8",

packages/solid/index.tsx

@@ -9,36 +9,24 @@ export default function QRX($props: Props) {
 
   const svg = createMemo(() => getSVGData(props))
 
-  const logoSqueezeFactor = 6 // smaller number = larger logo
-
-  const group = (
-    <g fill={svg().fills.path}>
-      <path d={svg().paths.body} />
-      <For each={svg().eyeItems}>
-        {item => <For each={svg().markers}>{marker => <use href={`#${svg().ids[item]}`} {...marker} />}</For>}
-      </For>
-    </g>
-  )
-
   return (
     <svg width='100%' {...rest} viewBox={`0 0 ${svg().length} ${svg().length}`}>
-      {svg().isMasked ? (
-        <g>
-          <mask id='mask'>{group}</mask>
-          <rect x='0' y='0' width='100%' height='100%' fill={svg().fills.rect} mask="url('#mask')" />
-        </g>
-      ) : (
-        group
-      )}
+      <path
+        d={svg().path}
+        fill={
+          svg().gradient || props.fillImage
+            ? `url(#${svg().gradient ? `${svg().gradient?.attributes.id}` : svg().ids.image})`
+            : 'currentColor'
+        }
+      />
 
       <defs>
-        <For each={svg().eyeItems}>{item => <path id={svg().ids[item]} d={svg().paths[item]} />}</For>
         <Show
           when={svg().gradient}
           fallback={
             <Show when={props.fillImage}>
               <pattern id={svg().ids.image} patternUnits='userSpaceOnUse' width='100%' height='100%'>
-                <image href={props.fillImage} x='0' y='0' width='100%' height='100%' preserveAspectRatio='xMidYMid slice' />
+                <image x='0' y='0' width='100%' height='100%' href={props.fillImage} preserveAspectRatio='xMidYMid slice' />
               </pattern>
             </Show>
           }

packages/solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qr-x/solid",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -21,10 +21,7 @@
     "esbuild": "^0.19.8",
     "esbuild-plugin-solid": "^0.5.0",
     "solid-js": "^1.8.7",
-    "storybook-solidjs": "^1.0.0-beta.2",
-    "storybook-solidjs-vite": "^1.0.0-beta.2",
-    "typescript": "^5.3.3",
-    "vite-plugin-solid": "^2.7.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "solid-js": "^1.x"

packages/svelte/index.stories.ts

@@ -1,6 +1,6 @@
 import { Default, FillImage, LinearGradient, RadialGradient, defaultMeta } from '@common/stories'
 import type { Meta } from '@storybook/svelte'
-import QRX from './dist/QRX.svelte'
+import QRX from './dist/index.svelte'
 
 // function $QRX(props: QrxProps) {
 //   return new QRX({ target: document.getElementById('storybook-root') as any, props })