chore: add config comment for mitosis.configs (#3981)

chore: rename some js files to match with esm or commonjs
chore: improve eslint for components
chore: make CUSTOM_ELEMENTS_SCHEMA optional for angular showcase
fix: issues with _templates

Author: nmerget

.eslintrc.js renamed to .eslintrc.mjs

@@ -1,5 +1,5 @@
 /* We use this for IntelliJ IDEs to fetch xo config */
-export default {
+const config = {
 	eslintConfig: {
 		parser: 'babel-eslint',
 		env: {
@@ -9,3 +9,5 @@ export default {
 		extends: ['./node_modules/xo/config/plugins.js']
 	}
 };
+
+export default config;

packages/components/.eslintrc.cjs

@@ -0,0 +1,53 @@
+/* eslint-disable no-undef */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+	overrides: [
+		{
+			files: ['**/*.lite.tsx'],
+			rules: {
+				/**
+				 * We need "any" for events because of different behavior between frameworks
+				 */
+				'@typescript-eslint/no-explicit-any': 'off'
+			}
+		},
+		{
+			files: ['**/shared/model.ts'],
+			rules: {
+				/**
+				 * We have some generics that are used later after generating the code for frameworks
+				 */
+				'@typescript-eslint/no-unused-vars': 'off'
+			}
+		},
+		{
+			files: ['**/configs/**/*.cjs'],
+			rules: {
+				/**
+				 * Mitosis requires CommonJS modules
+				 */
+				'@typescript-eslint/no-require-imports': 'off',
+				'no-undef': 'off'
+			}
+		}
+	],
+	env: {
+		browser: true,
+		es2021: true
+	},
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:@builder.io/mitosis/recommended'
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
+		},
+		ecmaVersion: 'latest',
+		sourceType: 'module'
+	},
+	plugins: ['@typescript-eslint', '@builder.io/mitosis']
+};

packages/components/.eslintrc.js

@@ -57,7 +57,7 @@ export default function DB<%= h.changeCase.pascal(name) %>(props: DB<%= h.change
 
   return (
     <div
-    	ref={ref}
+    	ref={_ref}
     	id={props.id}
     	class={cls('db-<%= name %>', props.className)}
 <% if(formValue!=="no"){   -%>

packages/components/_templates/mitosis/new/component/tsx.ejs.t

@@ -1,6 +1,6 @@
 ---
 inject: true
 to: "<%= showcases ? `../../showcases/patternhub/components/component-parser/index.tsx` : null %>"
-before: } from '../../../../output/react/src/index';
+prepend: true
 ---
-,DB<%= h.changeCase.pascal(name) %>
+import { DB<%= h.changeCase.pascal(name) %> } from '../../../../output/react/src/index';

packages/components/_templates/mitosis/new/prompt.js renamed to packages/components/_templates/mitosis/new/prompt.cjs

@@ -1,5 +1,7 @@
 const angular = require('./index.cjs');
-
+/**
+ * @type {import('@builder.io/mitosis').MitosisConfig}
+ */
 module.exports = {
 	files: 'src/**',
 	targets: ['angular'],

packages/components/_templates/mitosis/new/showcases/patternhub-comp-parser-import.ejs.t

@@ -3,6 +3,9 @@ const react = require('./react/index.cjs');
 const vue = require('./vue/index.cjs');
 const stencil = require('./stencil/index.cjs');
 
+/**
+ * @type {import('@builder.io/mitosis').MitosisConfig}
+ */
 module.exports = {
 	files: 'src/**',
 	targets: ['angular', 'vue', 'react', 'stencil'],

packages/components/_templates/update-docs/new/prompt.js renamed to packages/components/_templates/update-docs/new/prompt.cjs

@@ -1,3 +1,6 @@
+/**
+ * @type {import('@builder.io/mitosis').ToReactOptions}
+ */
 module.exports = {
 	typescript: true
 };