#30 basic dtif-to-svg package setup with async test pain

Author: bennobuilder

.vscode/settings.json

@@ -24,6 +24,7 @@
         "./packages/core-client",
         "./packages/discord-handler",
         "./packages/dtif-to-react",
+        "./packages/dtif-to-svg",
         "./packages/etsy-client",
         "./packages/figma-handler",
         "./packages/figma-to-dtif",

packages/dtif-to-svg/.eslintrc.js

@@ -0,0 +1,9 @@
+const OFF = 0;
+const WARNING = 1;
+const ERROR = 2;
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['pda-base'],
+};

packages/dtif-to-svg/README.md

@@ -0,0 +1,2 @@
+# `dtif-to-svg`
+Convert DTIF to SVG using D3.js.

packages/dtif-to-svg/jest.config.js

@@ -0,0 +1,10 @@
+const esModules = ['d3', 'd3-selection'].join('|');
+
+/** @type {import('jest').Config} */
+module.exports = {
+  preset: '@pda/jest-presets/jest/node',
+  moduleNameMapper: {
+    // https://stackoverflow.com/questions/69075510/jest-tests-failing-on-d3-import
+    '^d3-(.*)$': '<rootDir>/node_modules/d3-$1/dist/d3-$1.min.js',
+  },
+};

packages/dtif-to-svg/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pda/dtif-to-svg",
+  "version": "0.0.0",
+  "description": "Provides utilities to convert the Design Tree Interchange Format (DTIF) into SVG.",
+  "private": true,
+  "source": "./src/index.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "shx rm -rf dist && npx esno ../../scripts/build-ts-package.ts --prod",
+    "start:dev": "tsc -w",
+    "lint": "eslint --cache \"**/*.{js,ts}\"",
+    "clean": "shx rm -rf dist && shx rm -rf node_modules && shx rm -rf .turbo",
+    "install:clean": "pnpm run clean && pnpm install",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "@bennodev19",
+  "license": "MIT",
+  "dependencies": {
+    "d3-selection": "^3.0.0"
+  },
+  "peerDependencies": {
+    "jsdom": "^22.1.0"
+  },
+  "devDependencies": {
+    "@pda/jest-presets": "workspace:*",
+    "@pda/tsconfig": "workspace:*",
+    "@types/d3": "^7.4.0",
+    "@types/d3-selection": "^3.0.5",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^18.15.13",
+    "eslint": "^8.38.0",
+    "eslint-config-pda-base": "workspace:*",
+    "jest": "^29.5.0",
+    "jsdom": "^22.1.0",
+    "typescript": "^4.9.5"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ]
+}

packages/dtif-to-svg/src/__tests__/dtif-to-svg.test.ts

@@ -0,0 +1,14 @@
+import { dtifToSVG } from '..';
+
+describe('dtif-to-svg library tests', async () => {
+  it('should work', async () => {
+    // Arrange
+    const dtif = '';
+
+    // Act
+    const result = await dtifToSVG();
+
+    // Assert
+    expect(result).toBe('');
+  });
+});

packages/dtif-to-svg/src/d3.ts

@@ -0,0 +1,26 @@
+const d3 = (() => {
+  let d3: typeof import('d3-selection');
+
+  async function getD3() {
+    if (d3 == null) {
+      // Check if running in Node.js environment
+      if (typeof (globalThis as any).window === 'undefined') {
+        const { JSDOM } = await import('jsdom');
+        const { window } = new JSDOM();
+        (globalThis as any).window = window;
+        (globalThis as any).document = window.document;
+      }
+
+      // Import required D3 modules
+      d3 = (await Promise.all([import('d3-selection')]).then((d3) =>
+        Object.assign({}, ...d3)
+      )) as any;
+    }
+
+    return d3;
+  }
+
+  return getD3;
+})();
+
+export { d3 };

packages/dtif-to-svg/src/index.ts

@@ -0,0 +1,35 @@
+import { d3 } from './d3';
+
+export async function dtifToSVG() {
+  const svg = (await d3())
+    .select('body')
+    .append('svg')
+    .attr('width', 500)
+    .attr('height', 500);
+
+  const defs = svg.append('defs');
+
+  const gradient = defs
+    .append('linearGradient')
+    .attr('id', 'gradient')
+    .attr('x1', '0%')
+    .attr('y1', '0%')
+    .attr('x2', '100%')
+    .attr('y2', '100%');
+
+  gradient.append('stop').attr('offset', '0%').attr('stop-color', 'blue');
+
+  gradient.append('stop').attr('offset', '100%').attr('stop-color', 'red');
+
+  for (let i = 0; i < 100; i++) {
+    svg
+      .append('rect')
+      .attr('x', i * 5)
+      .attr('y', i * 5)
+      .attr('width', 50)
+      .attr('height', 50)
+      .attr('fill', 'url(#gradient)');
+  }
+
+  return (await d3()).select('body').html();
+}

packages/dtif-to-svg/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "extends": "@pda/tsconfig/shared-library.json",
+  "include": ["src"],
+}

packages/dtif-to-svg/tsconfig.prod.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig",
+  "exclude": [
+    "**/__tests__/*",
+    "**/*.test.ts"
+  ]
+}