feat: add support for alpine, preact, solidjs, mitosis, stencil

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -62,7 +62,7 @@ npx make-js-component --folder <PATH>
 Set which framework your component is for.
 
 ```bash
-npx make-js-component --framework [vue|angular|react|svelte|qwik|astro]
+npx make-js-component --framework [vue|angular|react|preact|solid|svelte|qwik|astro|alpine|stencil|mitosis]
 ```
 
 #### --[framework]
@@ -94,6 +94,16 @@ When choosing Vue, the wizard will ask you whether you prefer to use the **Optio
 
 When choosing React, the wizard will ask you if you want to use **TypeScript** or not, and you can make your selection using the arrow keys.
 
+### Preact
+> Want to help with Preact components? Check out [Preact related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3APreact)
+
+When choosing Preact, the wizard will ask you if you want to use **TypeScript** or not, and you can make your selection using the arrow keys.
+
+### Solid
+> Want to help with Solid components? Check out [Solid related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3ASolid)
+
+When choosing Solid, the wizard will ask you if you want to use **TypeScript** or not, and you can make your selection using the arrow keys.
+
 ### Angular
 > Want to help with Angular components? Check out [Angular related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3AAngular)
 
@@ -106,6 +116,21 @@ When choosing React, the wizard will ask you if you want to use **TypeScript** o
 ### Astro
 > Want to help with Astro components? Check out [Astro related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3AAstro)
 
+### Alpine
+> Want to help with Alpine components? Check out [Alpine related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3AAlpine)
+
+When choosing Alpine, the wizard will ask you if you want to use **TypeScript** or not, and you can make your selection using the arrow keys.
+
+### Stencil
+> Want to help with Stencil components? Check out [Stencil related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3AStencil)
+
+When choosing Stencil, the wizard will ask you if you want to use **Shadow DOM** or not, and you can make your selection using the arrow keys.
+
+### Mitosis
+> Want to help with Mitosis components? Check out [Mitosis related issues](https://github.com/Giuliano1993/make-js-component/issues?q=is%3Aissue+is%3Aopen+label%3AMitosis)
+
+When choosing Mitosis, the wizard will ask you if you want to use **TypeScript** or not, and you can make your selection using the arrow keys.
+
 ## Contributing
 
 Read the [Contributing guide](./CONTRIBUTING.md) for the contribution process

__tests__/menu.test.cjs

@@ -1,40 +1,153 @@
-const {render} = require('cli-testing-library');
+const { render } = require('cli-testing-library');
 const { default: exp } = require('constants');
-const {resolve} = require('path')
-
-
+const { resolve } = require('path');
+const fs = require('fs');
+const path = require('path');
 
 test('Open tool', async () => {
-    const path = resolve(__dirname, "../cmd/make-js-component.mjs")
-    const {clear, findByText, queryByText, userEvent, stdoutArr, debug} = await render('node', [
-      path
-    ])
-    //console.log(path)
-    const instance = await findByText('component')
-    expect(instance).toBeInTheConsole()
-})
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  const instance = await findByText('component');
+  expect(instance).toBeInTheConsole();
+});
 
 test('Component a name', async () => {
-    const path = resolve(__dirname, "../cmd/make-js-component.mjs")
-    const {clear, findByText, queryByText, userEvent, stdoutArr, debug} = await render('node', [
-      path
-    ])
-    //console.log(path)
-    userEvent.keyboard('componentName[Enter]');
-    expect(await findByText('src/components')).toBeInTheConsole()
-})
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+});
 
 test('Default folder and pick React', async () => {
-  const path = resolve(__dirname, "../cmd/make-js-component.mjs")
-  const {clear, findByText, queryByText, userEvent, stdoutArr, debug} = await render('node', [
-    path
-  ])
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+  userEvent.keyboard('[Enter]');
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Default folder and pick Preact', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+  userEvent.keyboard('[Enter]');
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Default folder and pick Solid', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+  userEvent.keyboard('[Enter]');
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Default folder and pick Alpine', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+  userEvent.keyboard('[Enter]');
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Default folder and pick Stencil', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
   //console.log(path)
   userEvent.keyboard('componentName[Enter]');
-  expect(await findByText('src/components')).toBeInTheConsole()
+  expect(await findByText('src/components')).toBeInTheConsole();
   userEvent.keyboard('[Enter]');
-  userEvent.keyboard('[ArrowDown]')
-  userEvent.keyboard('[ArrowDown]')
-  expect(await findByText('❯ React')).toBeInTheConsole()
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Default folder and pick Mitosis', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path]);
+  //console.log(path)
+  userEvent.keyboard('componentName[Enter]');
+  expect(await findByText('src/components')).toBeInTheConsole();
+  userEvent.keyboard('[Enter]');
+  expect(
+    await findByText('Pick a framework to create the component for'),
+  ).toBeInTheConsole();
+});
+
+test('Invalid component name shows error', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, userEvent } = await render('node', [path]);
+  userEvent.keyboard('invalid-name!@#[Enter]');
+  expect(
+    await findByText('Component name can only contain alphanumeric characters'),
+  ).toBeInTheConsole();
+});
+
+test('Help includes all frameworks', async () => {
+  const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+  const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+    await render('node', [path, '--help']);
+  expect(
+    await findByText(
+      'vue|angular|react|preact|solid|svelte|qwik|astro|alpine|stencil|mitosis',
+    ),
+  ).toBeInTheConsole();
+});
+
+const flagFrameworksData = [
+  { name: 'vue', nextPrompt: 'Do you use Nuxt?' },
+  { name: 'angular', nextPrompt: 'Do you want to create another component?' },
+  { name: 'react', nextPrompt: 'Do you want to use Typescript?' },
+  { name: 'preact', nextPrompt: 'Do you want to use Typescript?' },
+  { name: 'solid', nextPrompt: 'Do you want to use Typescript?' },
+  { name: 'svelte', nextPrompt: 'Do you want to use Typescript?' },
+  { name: 'qwik', nextPrompt: 'Choose wich type of component to create' },
+  { name: 'astro', nextPrompt: 'Do you want to create another component?' },
+  { name: 'alpine', nextPrompt: 'Do you want to use Typescript?' },
+  { name: 'stencil', nextPrompt: 'Do you want to use Shadow DOM?' },
+  { name: 'mitosis', nextPrompt: 'Do you want to use Typescript?' },
+];
 
-})
+test.each(flagFrameworksData)(
+  'Use --framework $name flag and check next prompt',
+  async ({ name, nextPrompt }) => {
+    const path = resolve(__dirname, '../cmd/make-js-component.mjs');
+    const { clear, findByText, queryByText, userEvent, stdoutArr, debug } =
+      await render('node', [
+        path,
+        '--framework',
+        name,
+        '--name',
+        'test',
+        '--folder',
+        'src/components',
+      ]);
+    expect(await findByText(nextPrompt)).toBeInTheConsole();
+  },
+);

jest.config.js

@@ -76,17 +76,16 @@ const config = {
   //   "node_modules"
   // ],
 
-  // An array of file extensions your modules use
-  // moduleFileExtensions: [
-  //   "js",
-  //   "mjs",
-  //   "cjs",
-  //   "jsx",
-  //   "ts",
-  //   "tsx",
-  //   "json",
-  //   "node"
-  // ],
+  moduleFileExtensions: [
+    "js",
+    "mjs",
+    "cjs",
+    "jsx",
+    "ts",
+    "tsx",
+    "json",
+    "node"
+  ],
 
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   // moduleNameMapper: {},

package.json

@@ -20,8 +20,13 @@
     "vue",
     "svelte",
     "react",
+    "preact",
+    "solid",
     "qwik",
     "astro",
+    "alpine",
+    "stencil",
+    "mitosis",
     "command",
     "npx"
   ],

src/stubs/alpine/function-component.js

@@ -0,0 +1,14 @@
+// Alpine.js ComponentName component
+
+export default function ComponentName() {
+  // Example Alpine.js component function
+  // Can be used to generate HTML or data for Alpine directives
+
+  return {
+    message: 'Hello ComponentName',
+    count: 0,
+    increment() {
+      this.count++;
+    }
+  };
+}

src/stubs/alpine/function-component.ts

@@ -0,0 +1,20 @@
+// Alpine.js ComponentName component
+
+interface ComponentNameData {
+  message: string;
+  count: number;
+  increment: () => void;
+}
+
+export default function ComponentName(): ComponentNameData {
+  // Example Alpine.js component function
+  // Can be used to generate HTML or data for Alpine directives
+
+  return {
+    message: 'Hello ComponentName',
+    count: 0,
+    increment() {
+      this.count++;
+    }
+  };
+}

src/stubs/mitosis/component.lite.jsx

@@ -0,0 +1,14 @@
+import { useState } from "@builder.io/mitosis";
+
+export default function ComponentName(props) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Hello {props.name || "ComponentName"}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Count: {count}
+      </button>
+    </div>
+  );
+}

src/stubs/mitosis/component.lite.tsx

@@ -0,0 +1,14 @@
+import { useState } from "@builder.io/mitosis";
+
+export default function ComponentName(props: any) {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <h1>Hello {props.name || "ComponentName"}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Count: {count}
+      </button>
+    </div>
+  );
+}

src/stubs/preact/function-component-css-module.jsx

@@ -0,0 +1,5 @@
+import styles from "./ComponentName.module.css";
+
+export default function ComponentName({}) {
+	return <div className={styles.ComponentName}>Hello ComponentName</div>;
+}

src/stubs/preact/function-component-css-module.tsx

@@ -0,0 +1,7 @@
+import styles from "./ComponentName.module.css";
+
+interface ComponentNameProps {}
+
+export default function ComponentName({}: ComponentNameProps) {
+	return <div className={styles.ComponentName}>Hello ComponentName</div>;
+}

src/stubs/preact/function-component-styled-components.jsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Title = styled.div`
+  font-size: x-large;
+	font-weight: bold;
+`;
+
+export default function ComponentName({}) {
+	return <Title>Hello ComponentName</Title>;
+}

src/stubs/preact/function-component-styled-components.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+interface ComponentNameProps {}
+
+const Title = styled.div`
+  font-size: x-large;
+	font-weight: bold;
+`;
+
+export default function ComponentName({}: ComponentNameProps) {
+	return <Title>Hello ComponentName</Title>;
+}

src/stubs/preact/function-component-tailwind.jsx

@@ -0,0 +1,3 @@
+export default function ComponentName({}) {
+	return <div className="text-lg font-bold">Hello ComponentName</div>;
+}