custom store key and add auto key feature via plugin

examples/counter/vite.config.ts

@@ -3,5 +3,5 @@ import { defineConfig } from 'vite';
 import { statebuilder } from 'statebuilder/vite';
 
 export default defineConfig({
-  plugins: [solid({ ssr: false }), statebuilder({ dev: true })],
+  plugins: [solid({ ssr: false }), statebuilder({ dev: true, autoKey: true })],
 });

packages/state/package.json

@@ -96,6 +96,7 @@
     "coverage": "vitest run --coverage"
   },
   "devDependencies": {
+    "@babel/types": "^7.26.0",
     "@solidjs/testing-library": "^0.5.1",
     "@vitest/coverage-c8": "^0.26.3",
     "consola": "^3.2.3",
@@ -110,6 +111,7 @@
     "vitest": "^2.1.3"
   },
   "dependencies": {
+    "@babel/parser": "^7.26.2",
     "@solid-primitives/event-bus": "^1.0.11",
     "rxjs": "^7.8.0",
     "solid-js": "^1.9.2"

packages/state/src/api.ts

@@ -14,6 +14,11 @@ import { StateBuilderError } from '~/error';
 
 export const $CREATOR = Symbol('store-creator-api'),
   $PLUGIN = Symbol('store-plugin');
+
+export interface CreateOptions {
+  key: string;
+}
+
 /**
  * A factory function that creates a store API definition creator.
  *
@@ -27,8 +32,14 @@ export function create<P extends any[], T extends GenericStoreApi>(
 ): (...args: P) => ApiDefinitionCreator<T> {
   let id = 0;
   return (...args) => {
-    const resolvedName = `${name}-${++id}`;
-    return new ApiDefinition<T, {}>(resolvedName, id, () => creator(...args));
+    let options = args.at(-1) as Partial<CreateOptions> | undefined;
+    let resolvedName = options?.key;
+    if (!resolvedName) {
+      resolvedName = `${name}-${++id}`;
+    }
+    return new ApiDefinition<T, {}>(resolvedName, id, () =>
+      creator(...(args as unknown as P)),
+    );
   };
 }
 

packages/state/src/dev.ts

@@ -15,8 +15,10 @@ if ($SB_DEV) {
 }
 
 export function __devRegisterContainer(container: Container) {
-  statebuilder.containers.push(container);
-  console.groupCollapsed(`[StateBuilder] - Register container`);
-  console.log(containers);
-  console.groupEnd();
+  containers.push(container);
+  if ('window' in globalThis) {
+    console.groupCollapsed(`[statebuilder] - Register container`);
+    console.log(containers);
+    console.groupEnd();
+  }
 }

packages/state/tsconfig.json

@@ -1,14 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "paths": {
-      "~/*": [
-        "./src/*"
-      ]
+      "~/*": ["./src/*"]
     }
   },
-  "include": [
-    "./src",
-    "./test"
-  ]
+  "include": ["./src", "./test"]
 }

packages/state/tsup.config.ts

@@ -27,6 +27,7 @@ export default defineConfig((options) => {
     },
     {
       entry: ['./vite/index.ts'],
+      external: ['@babel/types'],
       outDir: './dist/vite',
       format: 'esm',
       platform: 'node',

packages/state/vite/autoKey.ts

@@ -0,0 +1,28 @@
+import { Plugin } from 'vite';
+import { astAddAutoNaming } from './internal/astAutoNaming';
+import { parseModule } from 'magicast';
+
+interface StatebuilderAutonamingOptions {
+  transformStores: string[];
+}
+export function autoKey(options: StatebuilderAutonamingOptions): Plugin {
+  const { transformStores } = options;
+  return {
+    name: 'statebuilder:autokey',
+    transform(code, id, options) {
+      if (!code.includes('statebuilder')) {
+        return;
+      }
+      const findStoresTransformRegexp = new RegExp(transformStores.join('|'));
+      if (findStoresTransformRegexp.test(code)) {
+        const module = parseModule(code);
+        const result = astAddAutoNaming(module.$ast, (functionName) =>
+          transformStores.includes(functionName),
+        );
+        if (result) {
+          return module.generate();
+        }
+      }
+    },
+  };
+}

packages/state/vite/index.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vite';
-import { createConsola } from 'consola';
+import { ConsolaInstance, createConsola } from 'consola';
 import { colors } from 'consola/utils';
+import { autoKey } from './autoKey';
 
 export interface StateBuilderPluginOptions {
   /**
@@ -9,30 +10,78 @@ export interface StateBuilderPluginOptions {
    * @default false when running `build` command.
    */
   dev?: boolean;
+  /**
+   * If true, generates the key valued as the variable declaration name.
+   */
+  autoKey?: boolean;
+  /**
+   * A set of custom primitives to be included into the plugin transform processor
+   */
+  transformStores: string[];
 }
 
-function logPrefix() {
-  return colors.bgBlueBright(' StateBuilder ');
-}
-
-export function statebuilder(options?: StateBuilderPluginOptions): Plugin {
+export function statebuilder(options?: StateBuilderPluginOptions): Plugin[] {
   const consola = createConsola();
+
+  const defaultTransformStores = ['defineStore', 'defineSignal'];
+  const transformStores = [
+    ...defaultTransformStores,
+    ...(options?.transformStores ?? []),
+  ];
+
   let isDev: boolean = false;
+  const plugins: Plugin[] = [];
 
-  return {
-    name: 'statebuilder-config',
+  plugins.push({
+    name: 'statebuilder:config',
+    enforce: 'pre',
     config(userConfig, { command }) {
       isDev = options?.dev ?? command === 'serve';
+
+      const plugins: Plugin[] = [];
+      if (options?.autoKey) {
+        plugins.push(autoKey({ transformStores }));
+      }
+
       return {
         define: {
           __STATEBUILDER_DEV__: isDev,
         },
+        plugins,
       };
     },
     configResolved() {
       consola.log('\n');
       consola.log(`${logPrefix()}`);
-      consola.log(` ${colors.magenta(`mode`)}   ${isDev ? 'DEV' : 'PROD'}`);
+      logProperties(consola, [
+        ['mode', isDev ? 'DEV' : 'PROD', colors.magenta],
+        ['autoKey', options?.autoKey ?? false, colors.blue],
+      ]);
     },
-  };
+  });
+
+  if (options?.autoKey) {
+    plugins.push(autoKey({ transformStores }));
+  }
+
+  return plugins;
+}
+
+function logPrefix() {
+  return colors.bgBlueBright(' StateBuilder ');
+}
+
+function logProperties(
+  consola: ConsolaInstance,
+  entries: ReadonlyArray<
+    [key: string, value: any, modifier: (s: any) => string]
+  >,
+) {
+  const lenghts = entries.map(([key]) => key.length);
+  const maxLength = Math.max(...lenghts);
+  const padding = maxLength + 2;
+  for (const [key, value, modifier] of entries) {
+    const space = new Array(padding - key.length).fill(' ');
+    consola.log(`${modifier(key)}${space.join('')}`, value);
+  }
 }

packages/state/vite/internal/astAutoNaming.ts

@@ -0,0 +1,42 @@
+import * as t from '@babel/types';
+
+export function astAddAutoNaming(
+  program: t.Node,
+  filterStores: (name: string) => boolean,
+): boolean {
+  if (program.type !== 'Program') {
+    return false;
+  }
+  let modify = false;
+  for (const statement of program.body) {
+    t.traverse(statement, (node, ancestors) => {
+      if (t.isCallExpression(node)) {
+        if (t.isIdentifier(node.callee) && filterStores(node.callee.name)) {
+          ancestorsLoop: {
+            let variableName: string | null = null;
+            for (const ancestor of ancestors) {
+              if (
+                t.isVariableDeclarator(ancestor.node) &&
+                t.isIdentifier(ancestor.node.id)
+              ) {
+                variableName = ancestor.node.id.name;
+                modify = true;
+                const storeOptions = t.objectExpression([
+                  createNameProperty(variableName!),
+                ]);
+                node.arguments.push(storeOptions);
+                break ancestorsLoop;
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+  return modify;
+}
+
+function createNameProperty(variableName: string) {
+  return t.objectProperty(t.identifier('key'), t.stringLiteral(variableName));
+}