@nicerice/svelte-reactive-params 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 nicerice
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# svelte-reactive-params
+
+Makes any params passed to external functions reactive when changed and accessed there.
+
+## Why?
+I like to use script tags for declarations exclusively, hiding logic until I need it; and I still like using svelte 4 syntax for simple projects, which badly needs such a mechanism in the absence of $state() runes.
+
+## Transforms
+
+Rewrites arguments passed to imported external calls into accessor-backed values, so reactive values stay live when they cross module boundaries.
+
+Input:
+
+```svelte
+<script lang="ts">
+  import { countUp } from './lib/countUp.svelte.ts'
+
+  let { counter = 0 } = $props()
+
+  countUp(counter)
+</script>
+```
+
+Output:
+
+The plugin rewrites that call so `countUp` receives a live wrapper around `counter`.
+
+Usage:
+
+```ts
+export function countUp(args) {
+  const { value } = args
+  value++ // updates in template
+}
+```
+
+## Install
+
+```bash
+bun add svelte-reactive-params
+```
+
+## Use
+
+```ts
+// vite.config.ts
+import { svelteReactiveParams } from 'svelte-reactive-params'
+
+export default {
+  plugins: [svelteReactiveParams()],
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { createSvelteReactiveParamsPlugin as svelteReactiveParams } from './plugin/createSvelteReactiveParamsPlugin';
+export { transformSvelteReactiveParams } from './transform/transformSvelteReactiveParams';

package/dist/index.js

@@ -0,0 +1,228 @@
+// src/scope/collectDeclaredNames.ts
+import * as ts2 from "typescript";
+
+// src/scope/visitDeclarations.ts
+import * as ts from "typescript";
+function visitDeclarations(node, names) {
+  if (ts.isFunctionDeclaration(node) && node.name) {
+    names.add(node.name.text);
+  }
+  if (ts.isClassDeclaration(node) && node.name) {
+    names.add(node.name.text);
+  }
+  if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name)) {
+    names.add(node.name.text);
+  }
+  if (ts.isParameter(node) && ts.isIdentifier(node.name)) {
+    names.add(node.name.text);
+  }
+  if (ts.isBindingElement(node) && ts.isIdentifier(node.name)) {
+    names.add(node.name.text);
+  }
+  ts.forEachChild(node, (child) => visitDeclarations(child, names));
+}
+
+// src/scope/collectDeclaredNames.ts
+function collectDeclaredNames(code) {
+  const names = new Set;
+  const sourceFile = ts2.createSourceFile("file.ts", code, ts2.ScriptTarget.Latest, true, ts2.ScriptKind.TS);
+  visitDeclarations(sourceFile, names);
+  return names;
+}
+
+// src/scope/collectExternalImportNames.ts
+import * as ts4 from "typescript";
+
+// src/scope/visitImports.ts
+import * as ts3 from "typescript";
+
+// src/scope/isExternalReactiveModule.ts
+function isExternalReactiveModule(modulePath) {
+  return modulePath.endsWith(".svelte") || modulePath.endsWith(".svelte.ts");
+}
+
+// src/scope/visitImports.ts
+function visitImports(node, names) {
+  if (ts3.isImportDeclaration(node) && ts3.isStringLiteral(node.moduleSpecifier)) {
+    const modulePath = node.moduleSpecifier.text;
+    if (isExternalReactiveModule(modulePath)) {
+      const importClause = node.importClause;
+      if (importClause?.name) {
+        names.add(importClause.name.text);
+      }
+      if (importClause?.namedBindings && ts3.isNamedImports(importClause.namedBindings)) {
+        for (const element of importClause.namedBindings.elements) {
+          names.add(element.name.text);
+        }
+      }
+      if (importClause?.namedBindings && ts3.isNamespaceImport(importClause.namedBindings)) {
+        names.add(importClause.namedBindings.name.text);
+      }
+    }
+  }
+  ts3.forEachChild(node, (child) => visitImports(child, names));
+}
+
+// src/scope/collectExternalImportNames.ts
+function collectExternalImportNames(code) {
+  const names = new Set;
+  const sourceFile = ts4.createSourceFile("file.ts", code, ts4.ScriptTarget.Latest, true, ts4.ScriptKind.TS);
+  visitImports(sourceFile, names);
+  return names;
+}
+
+// src/transform/extractScriptBlocks.ts
+function extractScriptBlocks(code) {
+  const blocks = [];
+  const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/g;
+  let match = null;
+  while ((match = scriptRegex.exec(code)) !== null) {
+    const scriptStart = match.index + match[0].indexOf(">") + 1;
+    const scriptEnd = match.index + match[0].lastIndexOf("<");
+    blocks.push({ start: scriptStart, end: scriptEnd });
+  }
+  return blocks;
+}
+
+// src/transform/transformCallExpressions.ts
+import MagicString from "magic-string";
+import * as ts9 from "typescript";
+
+// src/transform/getRootIdentifier.ts
+import * as ts5 from "typescript";
+function getRootIdentifier(expression) {
+  if (ts5.isIdentifier(expression)) {
+    return expression.text;
+  }
+  if (ts5.isPropertyAccessExpression(expression) || ts5.isElementAccessExpression(expression)) {
+    return getRootIdentifier(expression.expression);
+  }
+  return null;
+}
+
+// src/transform/isExternalCall.ts
+function isExternalCall(expression, externalNames, localNames) {
+  const rootName = getRootIdentifier(expression);
+  return rootName !== null && externalNames.has(rootName) && !localNames.has(rootName);
+}
+
+// src/transform/renderReactiveArgument.ts
+import * as ts8 from "typescript";
+
+// src/transform/isAssignableExpression.ts
+import * as ts6 from "typescript";
+function isAssignableExpression(node) {
+  if (ts6.isIdentifier(node) || ts6.isPropertyAccessExpression(node) || ts6.isElementAccessExpression(node)) {
+    return true;
+  }
+  if (ts6.isParenthesizedExpression(node)) {
+    return isAssignableExpression(node.expression);
+  }
+  return false;
+}
+
+// src/transform/getSetterTarget.ts
+function getSetterTarget(node, sourceFile) {
+  if (isAssignableExpression(node)) {
+    return node.getText(sourceFile);
+  }
+  return null;
+}
+
+// src/transform/renderAccessorPair.ts
+function renderAccessorPair(name, getterValue, setterTarget) {
+  if (!setterTarget) {
+    return `get ${name}() { return ${getterValue} }`;
+  }
+  return `get ${name}() { return ${getterValue} }, set ${name}(value) { ${setterTarget} = value }`;
+}
+
+// src/transform/renderProperty.ts
+import * as ts7 from "typescript";
+function renderProperty(property, sourceFile) {
+  if (ts7.isSpreadAssignment(property)) {
+    return property.getText(sourceFile);
+  }
+  if (ts7.isShorthandPropertyAssignment(property)) {
+    const name = property.name.getText(sourceFile);
+    return renderAccessorPair(name, name, name);
+  }
+  if (ts7.isPropertyAssignment(property) && ts7.isIdentifier(property.name)) {
+    const name = property.name.text;
+    const value = property.initializer.getText(sourceFile);
+    const setterTarget = getSetterTarget(property.initializer, sourceFile);
+    return renderAccessorPair(name, value, setterTarget);
+  }
+  return property.getText(sourceFile);
+}
+
+// src/transform/renderReactiveObjectLiteral.ts
+function renderReactiveObjectLiteral(node, sourceFile) {
+  const properties = node.properties.map((property) => renderProperty(property, sourceFile)).filter(Boolean);
+  return `{ ${properties.join(", ")} }`;
+}
+
+// src/transform/renderReactiveArgument.ts
+function renderReactiveArgument(node, sourceFile) {
+  if (ts8.isObjectLiteralExpression(node)) {
+    return renderReactiveObjectLiteral(node, sourceFile);
+  }
+  const value = node.getText(sourceFile);
+  const setterTarget = getSetterTarget(node, sourceFile);
+  return `{ ${renderAccessorPair("value", value, setterTarget)} }`;
+}
+
+// src/transform/transformCallExpressions.ts
+function transformCallExpressions(code, externalNames, localNames, filePath) {
+  const sourceFile = ts9.createSourceFile(filePath, code, ts9.ScriptTarget.Latest, true, ts9.ScriptKind.TS);
+  const string = new MagicString(code);
+  visit(sourceFile);
+  return string.toString();
+  function visit(node) {
+    if (ts9.isCallExpression(node) && isExternalCall(node.expression, externalNames, localNames)) {
+      for (const arg of node.arguments) {
+        if (ts9.isSpreadElement(arg)) {
+          continue;
+        }
+        string.overwrite(arg.getStart(sourceFile), arg.getEnd(), renderReactiveArgument(arg, sourceFile));
+      }
+    }
+    ts9.forEachChild(node, visit);
+  }
+}
+
+// src/transform/transformSvelteReactiveParams.ts
+function transformSvelteReactiveParams(code, filePath = "file.svelte") {
+  const scripts = extractScriptBlocks(code);
+  if (scripts.length === 0) {
+    return code;
+  }
+  let transformedCode = code;
+  for (const script of [...scripts].reverse()) {
+    const scriptContent = code.slice(script.start, script.end);
+    const externalNames = collectExternalImportNames(scriptContent);
+    const localNames = collectDeclaredNames(scriptContent);
+    const transformedScript = transformCallExpressions(scriptContent, externalNames, localNames, filePath);
+    transformedCode = `${transformedCode.slice(0, script.start)}${transformedScript}${transformedCode.slice(script.end)}`;
+  }
+  return transformedCode;
+}
+
+// src/plugin/createSvelteReactiveParamsPlugin.ts
+function createSvelteReactiveParamsPlugin() {
+  return {
+    name: "svelte-reactive-params",
+    enforce: "pre",
+    transform(code, id) {
+      if (!id.endsWith(".svelte")) {
+        return null;
+      }
+      const contents = transformSvelteReactiveParams(code, id);
+      return contents === code ? null : contents;
+    }
+  };
+}
+export {
+  transformSvelteReactiveParams,
+  createSvelteReactiveParamsPlugin as svelteReactiveParams
+};

package/dist/plugin/createSvelteReactiveParamsPlugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function createSvelteReactiveParamsPlugin(): Plugin;

package/dist/plugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function createSvelteReactiveParamsPlugin(): Plugin;

package/dist/scope/collectDeclaredNames.d.ts

@@ -0,0 +1 @@
+export declare function collectDeclaredNames(code: string): Set<string>;

package/dist/scope/collectExternalImportNames.d.ts

@@ -0,0 +1 @@
+export declare function collectExternalImportNames(code: string): Set<string>;

package/dist/scope/isExternalReactiveModule.d.ts

@@ -0,0 +1 @@
+export declare function isExternalReactiveModule(modulePath: string): boolean;

package/dist/scope/visitDeclarations.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function visitDeclarations(node: ts.Node, names: Set<string>): void;

package/dist/scope/visitImports.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function visitImports(node: ts.Node, names: Set<string>): void;

package/dist/scope.d.ts

@@ -0,0 +1,2 @@
+export declare function collectExternalImportNames(code: string): Set<string>;
+export declare function collectDeclaredNames(code: string): Set<string>;

package/dist/transform/extractScriptBlocks.d.ts

@@ -0,0 +1,4 @@
+export declare function extractScriptBlocks(code: string): Array<{
+    start: number;
+    end: number;
+}>;

package/dist/transform/getRootIdentifier.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function getRootIdentifier(expression: ts.LeftHandSideExpression): string | null;

package/dist/transform/getSetterTarget.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function getSetterTarget(node: ts.Expression, sourceFile: ts.SourceFile): string | null;

package/dist/transform/isAssignableExpression.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function isAssignableExpression(node: ts.Expression): boolean;

package/dist/transform/isExternalCall.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function isExternalCall(expression: ts.LeftHandSideExpression, externalNames: Set<string>, localNames: Set<string>): boolean;

package/dist/transform/renderAccessorPair.d.ts

@@ -0,0 +1 @@
+export declare function renderAccessorPair(name: string, getterValue: string, setterTarget: string | null): string;

package/dist/transform/renderProperty.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function renderProperty(property: ts.ObjectLiteralElementLike, sourceFile: ts.SourceFile): string;

package/dist/transform/renderReactiveArgument.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function renderReactiveArgument(node: ts.Expression, sourceFile: ts.SourceFile): string;

package/dist/transform/renderReactiveObjectLiteral.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function renderReactiveObjectLiteral(node: ts.ObjectLiteralExpression, sourceFile: ts.SourceFile): string;

package/dist/transform/transformCallExpressions.d.ts

@@ -0,0 +1 @@
+export declare function transformCallExpressions(code: string, externalNames: Set<string>, localNames: Set<string>, filePath: string): string;

package/dist/transform/transformSvelteReactiveParams.d.ts

@@ -0,0 +1 @@
+export declare function transformSvelteReactiveParams(code: string, filePath?: string): string;

package/dist/transformCallExpressions.d.ts

@@ -0,0 +1 @@
+export declare function transformCallExpressions(code: string, externalNames: Set<string>, localNames: Set<string>, filePath: string): string;

package/dist/transformReactiveObjectLiteral.d.ts

@@ -0,0 +1,2 @@
+import * as ts from 'typescript';
+export declare function renderReactiveObjectLiteral(node: ts.ObjectLiteralExpression, sourceFile: ts.SourceFile): string;

package/dist/transformSvelteReactiveParams.d.ts

@@ -0,0 +1 @@
+export declare function transformSvelteReactiveParams(code: string, filePath?: string): string;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@nicerice/svelte-reactive-params",
+  "version": "0.1.0",
+  "description": "Makes any params passed to external functions reactive when changed and accessed there.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "bun test",
+    "build:types": "bun x tsc -p tsconfig.build.json",
+    "build:js": "bun build src/index.ts --outdir dist --format esm --external typescript --external magic-string",
+    "build": "bun run build:types && bun run build:js",
+    "prepack": "bun run build"
+  },
+  "keywords": [
+    "svelte",
+    "vite",
+    "plugin",
+    "reactivity"
+  ],
+  "author": "nicerice",
+  "license": "MIT",
+  "dependencies": {
+    "magic-string": "^0.30.21",
+    "typescript": "^5.9.3"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.14",
+    "vite": "^8.0.14"
+  }
+}