Merge pull request #13 from salamaashoush/new-plugin

Split plugins into separate packages

Author: salamaashoush

.changeset/real-moons-teach.md

@@ -1,5 +1,9 @@
-import { cssPlugin, defineConfig, jsonPlugin, vanillaExtractPlugin } from '.';
+import { cssPlugin } from '@design-sync/css-plugin';
+import { jsonPlugin } from '@design-sync/json-plugin';
+import { defineConfig } from '@design-sync/manager';
+import { vanillaExtractPlugin } from '@design-sync/vanilla-extract-plugin';
 
+console.log('dedupe-tokens config');
 export default defineConfig({
   uri: 'github:salamaashoush/kda-design-system/tokens#dedupe-tokens',
   out: 'generated',

apps/cli/README.md

@@ -23,24 +23,21 @@
     "precommit": "lint-staged"
   },
   "dependencies": {
+    "@design-sync/manager": "workspace:*",
     "@design-sync/utils": "workspace:*",
     "@design-sync/w3c-dtfm": "workspace:*",
-    "c12": "^1.5.1",
     "citty": "^0.1.5",
-    "consola": "^3.2.3",
-    "fast-glob": "^3.3.2",
-    "giget": "^1.1.3"
-  },
-  "peerDependencies": {
-    "prettier": "^3.0.0"
+    "nypm": "^0.3.3"
   },
   "devDependencies": {
+    "@design-sync/css-plugin": "workspace:*",
     "@design-sync/eslint-config": "workspace:*",
+    "@design-sync/json-plugin": "workspace:*",
     "@design-sync/tsconfig": "workspace:*",
+    "@design-sync/vanilla-extract-plugin": "workspace:*",
     "@types/node": "^20.9.3",
     "@vanilla-extract/css": "^1.14.0",
     "@vitest/coverage-v8": "^0.34.6",
-    "changelogen": "^0.5.5",
     "eslint": "^8.54.0",
     "prettier": "^3.1.0",
     "tsx": "^4.2.0",
@@ -69,5 +66,6 @@
     "main": "./dist/index.cjs",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts"
-  }
+  },
+  "packageManager": "pnpm@8.10.5"
 }

apps/cli/design-sync.config.js

@@ -1,31 +1,68 @@
+import { logger } from '@design-sync/manager';
+import { camelCase } from '@design-sync/utils';
 import { defineCommand } from 'citty';
 import { existsSync } from 'fs';
 import { writeFile } from 'fs/promises';
+import { addDevDependency } from 'nypm';
 import { join } from 'path';
-import { ConfigTemplateOptions, generateConfigTemplate } from '../configTemplate';
-import { logger } from '../logger';
+export interface ConfigTemplateOptions {
+  out: string;
+  uri: string;
+  plugins: string[];
+  prettify: boolean;
+}
+
+export function generateCJSConfigTemplate({ out, uri, plugins, prettify }: ConfigTemplateOptions) {
+  const pluginImports = plugins.map(
+    (plugin) => `const ${camelCase(plugin)}Plugin = require('@design-sync/${plugin}-plugin');`,
+  );
+  const pluginCalls = plugins.map((plugin) => `${camelCase(plugin)}Plugin()`);
+  return `const { defineConfig } = require('@design-sync/manager');
+${pluginImports.join('\n')}
+
+module.exports = defineConfig({
+  uri:  "${uri}",
+  out:  "${out}",
+  plugins: [${pluginCalls.join(', ')}],
+  prettify: ${prettify},
+});`;
+}
+
+export function generateESMConfigTemplate({ out, uri, plugins, prettify }: ConfigTemplateOptions) {
+  const pluginImports = plugins.map(
+    (plugin) => `import { ${camelCase(plugin)}Plugin } from '@design-sync/${plugin}-plugin';`,
+  );
+  const pluginCalls = plugins.map((plugin) => `${camelCase(plugin)}Plugin()`);
+  return `import { defineConfig } from '@design-sync/manager';
+${pluginImports.join('\n')}
+
+export default defineConfig({
+  uri:  "${uri}",
+  out:  "${out}",
+  plugins: [${pluginCalls.join(', ')}],
+  prettify: ${prettify},
+});`;
+}
+
+export function generateConfigTemplate(options: ConfigTemplateOptions, isCJS: boolean) {
+  return isCJS ? generateCJSConfigTemplate(options) : generateESMConfigTemplate(options);
+}
 
 async function configPrompt() {
-  const repo = await logger.prompt('What is the url of your tokens git repo?', {
+  const uri = await logger.prompt('What is the uri of your tokens git repo?', {
     type: 'text',
     placeholder: 'gh:username/repo/path/to/tokens#branch',
     default: 'gh:username/repo/path/to/tokens#branch',
   });
 
-  const tokensPath = await logger.prompt('Where are your tokens located?', {
-    type: 'text',
-    placeholder: 'tokens.json',
-    default: 'tokens.json',
-  });
-
   const out = await logger.prompt('Where would you like to output your tokens?', {
     type: 'text',
     placeholder: 'src/design-sync',
     default: 'src/design-sync',
   });
 
-  const plugin = await logger.prompt('Which plugin would you like to use?', {
-    type: 'select',
+  const plugins = await logger.prompt('Which plugin would you like to use?', {
+    type: 'multiselect',
     options: [
       'vanilla-extract',
       // 'styled-components',
@@ -45,7 +82,7 @@ async function configPrompt() {
     initial: false,
   });
 
-  return { repo, tokensPath, out, plugin, prettify };
+  return { uri, out, plugins, prettify };
 }
 
 export default defineCommand({
@@ -68,10 +105,9 @@ export default defineCommand({
   },
   async run({ args }) {
     let config: ConfigTemplateOptions = {
-      repo: 'gh:username/repo/path/to/tokens#branch',
+      uri: 'gh:username/repo/path/to/tokens#branch',
       out: 'src/design-sync',
-      tokensPath: 'tokens.json',
-      plugin: 'vanilla-extract',
+      plugins: ['json'],
       prettify: false,
     };
 
@@ -81,6 +117,14 @@ export default defineCommand({
     const isCJS = typeof require !== 'undefined';
     const isTypescript = existsSync(`${args.cwd}/tsconfig.json`);
     const template = generateConfigTemplate(config, isCJS);
+
+    const deps = ['@design-sync/cli', ...config.plugins.map((plugin) => `@design-sync/${plugin}-plugin`)];
+    logger.start(`Installing dependencies ${deps.join(', ')} ...`);
+    for (const dep of deps) {
+      await addDevDependency(dep, { cwd: args.cwd });
+    }
+    logger.success('Dependencies installed');
+
     const configPath = isTypescript ? 'design-sync.config.ts' : 'design-sync.config.js';
     await writeFile(join(args.cwd, configPath), template);
     logger.success(`Config file created at ${configPath}`);

apps/cli/package.json

@@ -1,8 +1,5 @@
+import { TokensManager, logger } from '@design-sync/manager';
 import { defineCommand } from 'citty';
-import { resolveConfig } from '../config';
-import { fetchTokens } from '../fetch';
-import { logger } from '../logger';
-import { TokensManager } from '../manager';
 
 export default defineCommand({
   meta: {
@@ -38,19 +35,9 @@ export default defineCommand({
     },
   },
   async run({ args }) {
-    const config = await resolveConfig(args);
-    const tokensManager = new TokensManager(config);
-    const { uri, auth, plugins = [] } = config;
-    for (const plugin of plugins) {
-      logger.info(`Loading plugin ${plugin.name}`);
-      tokensManager.use(plugin);
-    }
-
+    const tokensManager = new TokensManager();
     try {
-      const tokensObj = await fetchTokens(uri, auth);
-      logger.start('Processing tokens...');
-      await tokensManager.run(tokensObj);
-      logger.success('Tokens processed successfully.');
+      await tokensManager.run(args);
     } catch (error) {
       // eslint-disable-next-line no-console
       logger.error(error);

apps/cli/src/commands/init.ts

@@ -1,12 +1 @@
-import type { DesignSyncConfig } from './types';
-
-export * from './fetch';
-export * from './logger';
-export * from './manager';
-export * from './plugins';
-export * from './types';
-export * from './utils';
-
-export function defineConfig(config: Partial<DesignSyncConfig>) {
-  return config;
-}
+export {};

apps/cli/src/commands/sync.ts

@@ -1,6 +1,6 @@
 import { Dropdown, DropdownOption, Text } from '@create-figma-plugin/ui';
 import { h } from 'preact';
-import { FormField } from './FormField';
+import { FormField } from './FormField.tsx';
 import { errorStyle } from './formField.css.ts';
 
 interface SelectInputProps {

apps/cli/src/configTemplate.ts

@@ -2,7 +2,7 @@ import { Text, Textbox } from '@create-figma-plugin/ui';
 import { ReadonlySignal } from '@preact/signals';
 import { JSX, Ref, h } from 'preact';
 import { forwardRef } from 'preact/compat';
-import { FormField } from './FormField';
+import { FormField } from './FormField.tsx';
 import { errorStyle } from './formField.css.ts';
 
 interface TextInputProps {

apps/cli/src/index.ts

@@ -1,6 +1,6 @@
 import { Bold, IconAdjust32, IconButton, IconTrash32, Text } from '@create-figma-plugin/ui';
 import { h } from 'preact';
-import { Box } from '../../../components/Box';
+import { Box } from '../../../components/Box.tsx';
 import { remoteStorageCard } from './remoteStorageCard.css.ts';
 
 interface RemoteStorageCardProps {

apps/cli/src/plugins/index.ts

@@ -0,0 +1,3 @@
+node_modules
+coverage
+dist

apps/new-plugin/.eslintignore apps/figma-plugin/.eslintignore

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@design-sync/eslint-config/node',
+};

apps/new-plugin/.eslintrc.js apps/figma-plugin/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  // eslint
+  'src/**/*.{js,jsx,ts,tsx}': ' eslint',
+
+  // tsc
+  'src/**/*.{ts,tsx}': () => 'tsc',
+};