v-0.0.15

Author: orenelbaum

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+   "cSpell.words": [
+      "undestructure"
+   ]
+}

exp.cjs

@@ -4,4 +4,4 @@
      "target": "es6"
    },
    "exclude": ["node_modules"]
- }
+}

jsconfig.json

@@ -1,13 +1,14 @@
 {
 	"name": "babel-plugin-solid-undestructure",
 	"description": "A Babel plugin for SolidJS that allows you to destructure component props without losing reactivity.",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"main": "src/index.cjs",
 	"module": "src/index.js",
 	"types": "src/index.d.ts",
 	"type": "module",
 	"scripts": {
-		"test": "uvu tests"
+		"test": "uvu tests",
+		"playground": "node playground.cjs"
 	},
 	"peerDependencies": {
 		"solid-js": "^1.2.4"

package.json

@@ -0,0 +1,20 @@
+const { transformAsync } = require("@babel/core")
+
+
+// Change the following code and and run `npm run playground`
+const src=`import { Component } from 'solid-js'
+import x from 'babel-plugin-solid-undestructure'
+const MyComp: Component<T> = ({ a, b, c, ...other }) => {a; b; c; other;}`
+
+
+;(async () => {
+   const res = await transformAsync(
+      src,
+      { plugins: [
+         ["@babel/plugin-syntax-typescript", { isTSX: true }],
+         "./src/index.cjs"
+      ] }
+   )
+
+   console.log(res.code)
+})()

playground.cjs

@@ -72,7 +72,8 @@ const MyComp: Component<...> = props => {
 
 See also [undestructure-example](https://github.com/orenelbaum/undestructure-example).
 
-This plugin is still in early development and still has some bugs.
+This plugin doesn't have any known bugs at the moment. I'm not sure if it's ready for production yet but it probably will be soon. If you encounter any bugs please open an issue.
+
 
 ## `Component` type annotation
 
@@ -194,6 +195,6 @@ With this configuration you can use both the `Component` type and the `component
 
 ## Other cool plugins for Solid:
 
-- https://github.com/orenelbaum/babel-plugin-reactivars-solid - Svelte like "reactive variables" for Solid that lets you pass reactive variables (getter + setter) around in a concise way (also made by me).
-- https://github.com/LXSMNSYC/babel-plugin-solid-labels - Solid labels is more of an all in one plugin. It has reactive variables, prop destructuring (like this plugin) and some more stuff.
+- https://github.com/orenelbaum/babel-plugin-reactivars-solid - A Svelte-like "reactive variables" plugin for Solid that lets you pass reactive variables (getter + setter) around in a concise way (also made by me).
+- https://github.com/LXSMNSYC/babel-plugin-solid-labels - Solid labels is more of an all in one plugin. It has Svelte-like reactive variables, prop destructuring (like this plugin) and more.
 - https://github.com/LXSMNSYC/solid-sfc - An experimental SFC compiler for SolidJS.

readme.md

@@ -1,3 +1,4 @@
+const { getProgram } = require("../utils.cjs")
 
 /**
  * Checks that the function is annotated with the `component` CTF.
@@ -6,14 +7,15 @@ function checkCtfAnnotation(path, state) {
 	if (path.parent?.type !== "CallExpression") return false
 
 	const wrappingFunctionName = path.parent.callee.name
-	const bindings = path.context.scope.bindings
+	const bindings = getProgram(path).scope.bindings
 	const wrappingFunctionBinding = bindings[wrappingFunctionName]
 	if (!wrappingFunctionBinding) return false
 	const importSpecifier = wrappingFunctionBinding.path.node
 	if (importSpecifier.type !== "ImportSpecifier") return false
 	if (importSpecifier.imported.name !== "component") return false
 	if (wrappingFunctionBinding.path.parent.source.value !== 'babel-plugin-solid-undestructure') return false
 
+
 	state.isAnnotatedWithCtf = true
 	state.annotatingCtfBinding = wrappingFunctionBinding
 

src/check-func/check-ctf-annotation.cjs

@@ -29,6 +29,7 @@ const checkFirstParam = path => {
  * If the function is annotated with a CTF, mark it in the state.
  */
 const checkFunc = (funcPath, opts, state) => {
+   // Make sure the function wasn't already transformed.
    if (funcPath.transformed) return false
 
 	if (!checkFuncAnnotation(opts, funcPath, state)) return { funcAnnotation: false }

src/check-func/check-func.cjs

@@ -0,0 +1,43 @@
+const { validateFunc } = require("./validate-func.cjs")
+const { checkFunc } = require("./check-func/check-func.cjs")
+const { getPropsInfo } = require("./get-props-info.cjs")
+const { removeWrappingCtf } = require("./remove-wrapping-ctf.cjs")
+const { addMergePropsCall } = require("./add-merge-props-call.cjs")
+const { transformPropsParam } = require("./transform-props-param.cjs")
+const { createNewPropsIdentifier } = require("./create-new-props-identifier.cjs")
+const { transformPropReferences } = require("./transform-prop-references.cjs")
+const { handleRestElement } = require("./handle-rest-element.cjs")
+
+
+const funcVisitor = (funcPath, { opts }) => {
+	const state = {}
+
+	// Check that the function needs to be transformed.
+	const checkRes =  checkFunc(funcPath, opts, state)
+
+	if (!checkRes?.funcAnnotation) return
+
+	removeWrappingCtf(funcPath, state)
+
+	if (!checkRes.propDestructuring) return
+
+	// Validate that the function doesn't use unsupported syntax.
+	validateFunc(funcPath)
+
+	getPropsInfo(funcPath, state)
+	
+	// Create a unique props identifier and store it in state.
+	createNewPropsIdentifier(funcPath, state)
+
+	addMergePropsCall(funcPath, state)
+	
+	handleRestElement(funcPath, state)
+	
+	transformPropReferences(funcPath, state)
+	
+	transformPropsParam(funcPath, state)
+
+	funcPath.transformed = true
+}
+
+module.exports = { funcVisitor }

src/func-visitor.cjs

@@ -0,0 +1,59 @@
+
+/**
+ * Checks if there are any remaining imports from `babel-plugin-solid-undestructure`.
+ * If there are any remaining imports and any of them are used, an error is thrown.
+ * Otherwise, if none are used, the remaining imports are removed.
+ */
+const handleRemainingPluginImports = programPath => {
+   const pluginImportPaths = getPluginImportPaths(programPath)
+
+   if (pluginImportPaths.length > 0) {
+      const bindings = programPath.scope.bindings
+
+      let someImportIsUsed = checkIfAnyImportsAreUsed(pluginImportPaths, bindings)
+
+      if (someImportIsUsed) {
+         throw new Error(
+`babel-plugin-undestructure error: An import from 'babel-plugin-undestructure' remained after applying the transformation.
+This is either a configuration problem or a bug in the plugin.
+If the plugin is configured correctly, please open an issue on GitHub.`
+         )
+      }
+
+      // Remove the import declarations.
+      for (const importDeclarationPath of pluginImportPaths)
+         importDeclarationPath.remove()
+   }
+}
+
+function checkIfAnyImportsAreUsed(pluginImportPaths, bindings) {
+   let someImportIsUsed = false
+
+   for (const importDeclarationPath of pluginImportPaths){
+      const importDeclaration = importDeclarationPath.node
+      for (const specifier of importDeclaration.specifiers)
+         if (bindings[specifier.local.name].references >= 1)
+            someImportIsUsed = true
+   }
+   
+   return someImportIsUsed
+}
+
+function getPluginImportPaths(programPath) {
+   const bodyLength = programPath.node.body.length
+   const pluginImportPaths = []
+
+   for (let i = 0; i < bodyLength; i++) {
+      const node = programPath.node.body[i]
+      
+      if (
+         node.type === 'ImportDeclaration'
+         && node.source.value === 'babel-plugin-solid-undestructure'
+      )
+         pluginImportPaths.push(programPath.get(`body.${i}`))
+   }
+
+   return pluginImportPaths
+}
+
+module.exports.handleRemainingPluginImports = handleRemainingPluginImports