zylaris 1.0.2

package/packages/plugins/src/index.ts

@@ -0,0 +1,238 @@
+/**
+ * Zylaris Plugins System
+ * Use any JavaScript library with ease
+ */
+
+export type {
+  LibraryFormat,
+  LibrarySource,
+  CDNProvider,
+  PluginContext,
+  Transform,
+  LibraryConfig,
+  AutoImportConfig,
+  CDNOptions,
+  ExternalConfig,
+  ComponentAdapter,
+  WebComponentConfig,
+  Plugin,
+  ImportMap,
+  ImportMapEntry,
+  ResolveResult,
+  BundleAnalysis,
+  PluginPreset,
+  LoaderOptions,
+  RegistrySearchResult,
+} from './types.js';
+
+// Auto-import
+export {
+  createAutoImport,
+  autoImportPresets,
+  createAutoImportFromDeps,
+  generateDTS,
+} from './loaders/auto-import.js';
+
+// CDN Loader
+export {
+  generateCDNUrl,
+  createImportMap,
+  generateScriptTag,
+  generateImportMapScript,
+  resolveFromCDN,
+  CDNCache,
+  fetchModule,
+  transformImportsToCDN,
+  cdnPlugin,
+} from './cdn/loader.js';
+
+// External Dependencies
+export {
+  prebundleDependencies,
+  generateOptimizedImportMap,
+  createExternalResolver,
+  DependencyGraph,
+  estimateBundleImpact,
+} from './loaders/external.js';
+
+// Transforms
+export {
+  transformUMDToESM,
+  transformCJSToESM,
+  transformAMDToESM,
+  transformSystemJSToESM,
+  detectFormat,
+  autoTransformToESM,
+  reactAdapter,
+  vueAdapter,
+  svelteAdapter,
+  generateWebComponentWrapper,
+  optimizeImports,
+  treeShake,
+} from './transforms/index.js';
+
+import type { LoaderOptions, Plugin } from './types.js';
+import { createAutoImport } from './loaders/auto-import.js';
+import { cdnPlugin } from './cdn/loader.js';
+import { createExternalResolver } from './loaders/external.js';
+
+/** Create plugin system */
+export function createPluginSystem(options: LoaderOptions = {}): Plugin[] {
+  const plugins: Plugin[] = [];
+
+  // Auto-import plugin
+  if (options.autoImports && options.autoImports.length > 0) {
+    plugins.push({
+      name: 'auto-import',
+      transform: createAutoImport(options.autoImports),
+    });
+  }
+
+  // CDN plugin
+  if (options.cdn && options.libraries) {
+    plugins.push({
+      name: 'cdn-loader',
+      configureBuild: (buildOptions) => {
+        const cdn = cdnPlugin(options.libraries!, options.cdn);
+        // Add to esbuild plugins
+        return {
+          ...buildOptions,
+          plugins: [...(buildOptions.plugins || []), cdn],
+        };
+      },
+    });
+  }
+
+  // External resolver
+  if (options.external) {
+    const isExternal = createExternalResolver(options.external);
+    plugins.push({
+      name: 'external-resolver',
+      resolveId: (id: string): string | null => {
+        if (isExternal(id)) {
+          return id;
+        }
+        return null;
+      },
+    });
+  }
+
+  // Custom transforms
+  if (options.transforms) {
+    for (const transform of options.transforms) {
+      plugins.push({
+        name: transform.name,
+        transform,
+      });
+    }
+  }
+
+  return plugins;
+}
+
+/** Plugin presets */
+export const presets = {
+  /** React integration */
+  react: (): LoaderOptions => ({
+    autoImports: [
+      {
+        from: 'react',
+        imports: ['useState', 'useEffect', 'useCallback', 'useMemo'],
+      },
+    ],
+    adapters: [
+      {
+        framework: 'react',
+        transform: (code: string) => code,
+      },
+    ],
+  }),
+
+  /** Vue integration */
+  vue: (): LoaderOptions => ({
+    autoImports: [
+      {
+        from: 'vue',
+        imports: ['ref', 'reactive', 'computed', 'watch', 'onMounted'],
+      },
+    ],
+    adapters: [
+      {
+        framework: 'vue',
+        transform: (code: string) => code,
+      },
+    ],
+  }),
+
+  /** CDN-only mode */
+  cdn: (libraries: string[]): LoaderOptions => ({
+    cdn: {
+      provider: 'esm.sh',
+    },
+    libraries: libraries.map(name => ({
+      name,
+      source: 'cdn',
+    })),
+    external: {
+      external: libraries,
+    },
+  }),
+
+  /** Zero-config defaults */
+  recommended: (): LoaderOptions => ({
+    autoImports: [
+      {
+        from: 'zylaris',
+        imports: ['signal', 'computed', 'createEffect', 'Show', 'For'],
+      },
+    ],
+    cdn: {
+      provider: 'esm.sh',
+    },
+    external: {
+      prebundle: [],
+    },
+  }),
+};
+
+/** Helper to use any library */
+export async function useLibrary(
+  name: string,
+  options: {
+    from?: 'npm' | 'cdn';
+    cdn?: import('./types.js').CDNProvider;
+    version?: string;
+  } = {}
+): Promise<unknown> {
+  const { from = 'npm' } = options;
+
+  if (from === 'cdn') {
+    const { generateCDNUrl, fetchModule } = await import('./cdn/loader.js');
+    const url = generateCDNUrl(name, {
+      provider: options.cdn || 'esm.sh',
+      version: options.version,
+    });
+    const module = await fetchModule(url);
+    
+    // Create data URL for dynamic import
+    const blob = new Blob([module], { type: 'application/javascript' });
+    const dataUrl = URL.createObjectURL(blob);
+    
+    return import(dataUrl);
+  }
+
+  // NPM import
+  return import(name);
+}
+
+/** Define plugin configuration */
+export function definePlugins(options: LoaderOptions): LoaderOptions {
+  return options;
+}
+
+export default {
+  createPluginSystem,
+  presets,
+  useLibrary,
+  definePlugins,
+};

package/packages/plugins/src/loaders/auto-import.ts

@@ -0,0 +1,219 @@
+/**
+ * Auto-Import System
+ * Automatically import libraries without manual import statements
+ */
+
+import { createUnimport, type Import } from 'unimport';
+import type { AutoImportConfig, Transform } from '../types.js';
+
+/** Create auto-import transform */
+export function createAutoImport(config: AutoImportConfig[]): Transform {
+  const unimports: Import[] = [];
+
+  for (const item of config) {
+    // Named imports
+    if (item.imports) {
+      for (const name of item.imports) {
+        unimports.push({
+          name,
+          from: item.from,
+          as: name,
+        });
+      }
+    }
+
+    // Default import
+    if (item.defaultImport) {
+      unimports.push({
+        name: 'default',
+        from: item.from,
+        as: item.defaultImport,
+      });
+    }
+
+    // Namespace import
+    if (item.namespaceImport) {
+      unimports.push({
+        name: '*',
+        from: item.from,
+        as: item.namespaceImport,
+      });
+    }
+  }
+
+  return {
+    name: 'auto-import',
+    test: (id: string) => {
+      // Apply to JS/TS files only
+      return /\.(tsx?|jsx?|mjs|vue|svelte)$/.test(id);
+    },
+    handler: async (code: string, id: string) => {
+      const ctx = createUnimport({
+        imports: unimports,
+        presets: [
+          {
+            from: 'zylaris',
+            imports: ['signal', 'computed', 'createEffect', 'batch'],
+          },
+        ],
+      });
+
+      await ctx.init();
+      const result = await ctx.injectImports(code, id);
+      return result.code || code;
+    },
+  };
+}
+
+/** Preset configurations for popular libraries */
+export const autoImportPresets = {
+  /** Vue 3 Composition API */
+  vue: (): AutoImportConfig[] => [
+    {
+      from: 'vue',
+      imports: [
+        'ref', 'reactive', 'computed', 'watch', 'watchEffect',
+        'onMounted', 'onUnmounted', 'onUpdated',
+        'provide', 'inject', 'useSlots', 'useAttrs'
+      ],
+    },
+  ],
+
+  /** React hooks */
+  react: (): AutoImportConfig[] => [
+    {
+      from: 'react',
+      imports: [
+        'useState', 'useEffect', 'useCallback', 'useMemo',
+        'useRef', 'useContext', 'useReducer', 'useLayoutEffect'
+      ],
+    },
+  ],
+
+  /** SolidJS primitives */
+  solid: (): AutoImportConfig[] => [
+    {
+      from: 'solid-js',
+      imports: [
+        'createSignal', 'createEffect', 'createMemo', 'createResource',
+        'onMount', 'onCleanup', 'useContext'
+      ],
+    },
+  ],
+
+  /** Zylaris framework */
+  zylaris: (): AutoImportConfig[] => [
+    {
+      from: 'zylaris',
+      imports: [
+        'signal', 'computed', 'resource', 'createEffect', 'batch',
+        'Show', 'For', 'Switch', 'Match', 'Suspense'
+      ],
+    },
+  ],
+
+  /** Utility libraries */
+  lodash: (): AutoImportConfig[] => [
+    {
+      from: 'lodash-es',
+      imports: [
+        'debounce', 'throttle', 'cloneDeep', 'merge', 'omit', 'pick',
+        'groupBy', 'orderBy', 'uniqueId', 'isEqual', 'isEmpty'
+      ],
+    },
+  ],
+
+  /** Date utilities */
+  date: (): AutoImportConfig[] => [
+    {
+      from: 'date-fns',
+      imports: [
+        'format', 'parseISO', 'addDays', 'subDays', 'isBefore', 'isAfter'
+      ],
+    },
+  ],
+
+  /** Validation */
+  zod: (): AutoImportConfig[] => [
+    {
+      from: 'zod',
+      imports: ['z'],
+      defaultImport: 'z',
+    },
+  ],
+
+  /** All common utils */
+  utils: (): AutoImportConfig[] => [
+    ...autoImportPresets.lodash(),
+    ...autoImportPresets.date(),
+  ],
+};
+
+/** Create auto-import from package.json dependencies */
+export async function createAutoImportFromDeps(
+  packageJsonPath: string = 'package.json'
+): Promise<AutoImportConfig[]> {
+  const fs = await import('fs/promises');
+  
+  try {
+    const content = await fs.readFile(packageJsonPath, 'utf-8');
+    const pkg = JSON.parse(content);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const configs: AutoImportConfig[] = [];
+
+    for (const [name] of Object.entries(deps)) {
+      // Check if we have a preset for this package
+      const preset = findPresetForPackage(name);
+      if (preset) {
+        configs.push(...preset());
+      }
+    }
+
+    return configs;
+  } catch {
+    return [];
+  }
+}
+
+/** Find preset for package */
+function findPresetForPackage(name: string): (() => AutoImportConfig[]) | null {
+  const presetMap: Record<string, () => AutoImportConfig[]> = {
+    'vue': autoImportPresets.vue,
+    'react': autoImportPresets.react,
+    'solid-js': autoImportPresets.solid,
+    'zylaris': autoImportPresets.zylaris,
+    'lodash-es': autoImportPresets.lodash,
+    'date-fns': autoImportPresets.date,
+    'zod': autoImportPresets.zod,
+  };
+
+  return presetMap[name] || null;
+}
+
+/** Generate TypeScript declarations for auto-imports */
+export function generateDTS(configs: AutoImportConfig[]): string {
+  const lines: string[] = [];
+  
+  for (const config of configs) {
+    if (config.imports) {
+      for (const name of config.imports) {
+        lines.push(`  const ${name}: typeof import('${config.from}')['${name}']`);
+      }
+    }
+    if (config.defaultImport) {
+      lines.push(`  const ${config.defaultImport}: typeof import('${config.from}')['default']`);
+    }
+    if (config.namespaceImport) {
+      lines.push(`  const ${config.namespaceImport}: typeof import('${config.from}')`);
+    }
+  }
+
+  return `// Auto-generated by @zylaris/plugins
+export {}
+declare global {
+${lines.join('\n')}
+}
+`;
+}
+
+export default createAutoImport;