add support for ParentComponent type annotation

Author: orenelbaum

readme.md

@@ -11,15 +11,25 @@ Usage with examples:
 
 ```jsx
 // Use the `Component` type to mark components that will be transformed by the plugin
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const MyComp: Component<...> = ({ a, b, c }) => {a; b; c;};
 
 //  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓  The above code will compile to
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const MyComp: Component<...> = props => {props.a; props.b; props.c;}
 
 
 
+// Also works with the `ParentComponent` type
+import type { ParentComponent } from 'solid-js'
+const MyComp: ParentComponent<...> = ({ a, b, c }) => {a; b; c;};
+
+//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
+import type { ParentComponent } from 'solid-js'
+const MyComp: ParentComponent<...> = props => {props.a; props.b; props.c;}
+
+
+
 // You can use a compile time function instead of using the `Component` type (needed for vanilla JS)
 import { component } from 'undestructure-macros'
 const MyComp = component(({ a, b, c }) => {a; b; c;})
@@ -30,13 +40,13 @@ const MyComp = props => {props.a; props.b; props.c;}
 
 
 // Default props using `mergeProps`
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const MyComp: Component<...> = (
   { a = 1, b = 2, c = 3 } = defaultProps
 ) => {a; b; c;}
 
 //  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
-import { Component, mergeProps } from 'solid-js'
+import { type Component, mergeProps } from 'solid-js'
 const MyComp: Component<...> = props => {
   props = mergeProps(defaultProps, { a: 1, b: 2, c: 3 }, props);
   props.a; props.b; props.c;
@@ -45,21 +55,21 @@ const MyComp: Component<...> = props => {
 
 
 // Rename props
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const MyComp: Component<...> = ({ a: d, b: e, c: f }) => {d; e; f;}
 
 //  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
-import { Component, mergeProps } from 'solid-js'
+import { type Component, mergeProps } from 'solid-js'
 const MyComp: Component<...> = props => {props.a; props.b; props.c;}
 
 
 
 // Rest element destructuring using `splitProps`
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const MyComp: Component<...> = ({ a, b, c, ...other }) => {a; b; c; other;}
 
 //  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
-import { Component, splitProps } from 'solid-js'
+import { type Component, splitProps } from 'solid-js'
 const MyComp: Component<...> = props => {
   let other;
   [props, other] = splitProps(props, ["a", "b", "c"]);
@@ -69,15 +79,15 @@ const MyComp: Component<...> = props => {
 
 
 // You can nest components
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const Parent: Component<...> = ({ a, b }) => {
   const Child: Component<...> = ({ c, d }) => {
     a; b; c; d;
   }
 }
 
 //  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 const Parent: Component<...> = props1 => {
   const Child: Component<...> = props2 => {
     props1.a; props1.b; props2.c; props2.d;
@@ -99,7 +109,7 @@ In both cases you can use the 'import as' syntax.
 Examples:
 
 ```tsx
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 
 const MyComponent: Component = // ...
 ```
@@ -111,15 +121,15 @@ const MyComponent: Solid.Component = // ...
 ```
 
 ```tsx
-import { Component as ComponentAlias } from 'solid-js'
+import type { Component as ComponentAlias } from 'solid-js'
 
 const MyComponent: ComponentAlias = // ...
 ```
 
 This example won't work:
 
 ```tsx
-import { Component } from 'solid-js'
+import type { Component } from 'solid-js'
 
 type ComponentAlias = Component
 

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

@@ -6,7 +6,7 @@ const possibleAnnotationKinds = ['type', 'ctf', 'pragma']
 
 
 /**
- * Checks if the function is annotated with the `Component` type or the `component` CTF.
+ * Checks if the function is annotated with the `Component` or `ParentComponent` types or the `component` CTF.
  * @todo Add support for pragma annotations.
  */
 function checkFuncAnnotation(opts, path, state) {

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

@@ -1,6 +1,6 @@
 
 /**
- * Checks if the function is annotated with the `Component` type.
+ * Checks if the function is annotated with the `Component` or `ParentComponent` types.
  */
 function checkTypeAnnotation(path) {
 	// Check that the func is an arrow function which is assigned to a variable.
@@ -19,11 +19,17 @@ function checkTypeAnnotation(path) {
 
 		const importSpecifier = typeBinding.path.node
 		if (importSpecifier.type !== "ImportSpecifier") return false
-		if (importSpecifier.imported.name !== "Component") return false
+		if (
+			importSpecifier.imported.name !== "Component"
+			&& importSpecifier.imported.name !== "ParentComponent"
+		) return false
 		if (typeBinding.path.parent.source.value !== "solid-js") return false
 	}
 	else if (typeAnnotation.typeName.type === "TSQualifiedName") {
-		if (typeAnnotation.typeName.right.name !== "Component") return false
+		if (
+			typeAnnotation.typeName.right.name !== "Component"
+			&& typeAnnotation.typeName.right.name !== "ParentComponent"
+		) return false
 		const typeQualification = typeAnnotation.typeName.left
 		if (typeQualification.type !== "Identifier") return false
 		const typeQualificationName = typeQualification.name

tests/index.test.js

@@ -6,7 +6,7 @@ import * as assert from 'uvu/assert'
 test('index', async () => {
    await testBasicCase()
 	await testAliasedCtf()
-	await testTypeAnnotation()
+	await testComponentTypeAnnotation()
 	await testAliasedTypeAnnotation()
 	await testDefaultProps()
    await testFallbackProps()
@@ -78,14 +78,14 @@ _props2 => {
 }
 
 
-async function testTypeAnnotation() {
+async function testComponentTypeAnnotation() {
 	const src =
-/*javascript*/`import { Component } from 'solid-js';
+/*javascript*/`import type { Component } from 'solid-js';
 const comp: Component = ({ a, b }) => {a; b;};
 const comp2: Component<T> = ({ a, b }) => {a; b;};`
 
 	const expectedOutput =
-/*javascript*/`import { Component } from 'solid-js';
+/*javascript*/`import type { Component } from 'solid-js';
 const comp: Component = _props => {
   _props.a;
   _props.b;
@@ -104,14 +104,40 @@ const comp2: Component<T> = _props2 => {
 }
 
 
+async function testParentComponentTypeAnnotation() {
+	const src =
+/*javascript*/`import type { ParentComponent } from 'solid-js';
+const comp: ParentComponent = ({ a, b }) => {a; b;};
+const comp2: ParentComponent<T> = ({ a, b }) => {a; b;};`
+
+	const expectedOutput =
+/*javascript*/`import type { ParentComponent } from 'solid-js';
+const comp: ParentComponent = _props => {
+  _props.a;
+  _props.b;
+};
+const comp2: ParentComponent<T> = _props2 => {
+  _props2.a;
+  _props2.b;
+};`
+
+	const res = await transformAsync(
+		src,
+		{ plugins: ["@babel/plugin-syntax-typescript", "./src/index.cjs"] }
+	)
+
+	assert.snapshot(res.code, expectedOutput, 'TS annotation.')
+}
+
+
 async function testAliasedTypeAnnotation() {
 	const src =
-/*javascript*/`import { Component, Component as Comp } from 'solid-js';
+/*javascript*/`import type { Component, Component as Comp } from 'solid-js';
 const comp: Component = ({ a, b }) => {a; b;};
 const comp2: Comp<T> = ({ a, b }) => {a; b;};`
 
 	const expectedOutput =
-/*javascript*/`import { Component, Component as Comp } from 'solid-js';
+/*javascript*/`import type { Component, Component as Comp } from 'solid-js';
 const comp: Component = _props => {
   _props.a;
   _props.b;
@@ -694,7 +720,7 @@ export const Parent: Component = _props => {
 		)
 	}
 	catch (e) {
-		assert.unreachable(e.message);
+		assert.unreachable(e.message)
 	}
 	assert.snapshot(res.code, expectedOutput, 'Nested components with type annotation')
 }