Release/1.1.0 [in progress]

.eslintrc.js → .eslintrc.cjs

@@ -1,6 +1,7 @@
 const DISABLED = 0;
 const WARNING = 1;
 const ERROR = 2;
+
 module.exports = {
   parser: '@typescript-eslint/parser',
   // Specifies the ESLint parser

.ncurc.json

@@ -0,0 +1,7 @@
+{
+  "reject": [
+    "mini-css-extract-plugin",
+    "ora",
+    "typescript"
+  ]
+}

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "endOfLine": "auto"
+}

.storybook/main.js → .storybook/main.cjs

@@ -24,6 +24,12 @@ module.exports = {
     use.unshift(MiniCssExtractPlugin.loader);
     cssRule.use = use.filter((x) => !x?.loader?.includes('style-loader'));
 
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto'
+    });
+
     config.module.rules.push({
       test: /code\.tsx$/,
       loader: 'string-replace-loader',

.storybook/storybook.css

@@ -136,7 +136,6 @@ button.sidebar-item.sidebar-item ~ div > a {
     @mixin background-opacity var(--pa-color-primary-brightest), 0.25;
     color: var(--pa-color-primary-darkest);
     padding: 0.25rem;
-    justify-content: center;
 
     &.is-highlighted {
       @mixin background-opacity var(--pa-color-primary-brightest), 0.8;

.stylelintrc

@@ -1,40 +1,30 @@
 {
   "extends": "stylelint-prettier/recommended",
-  "ignoreFiles": ["**/*.html", "**/*.js", "**/*.ts"],
+  "ignoreFiles": [
+    "**/*.html",
+    "**/*.js",
+    "**/*.ts"
+  ],
   "plugins": [
     "stylelint-prettier",
   ],
   "rules": {
     "prettier/prettier": true,
     "at-rule-no-unknown": null,
     "font-family-no-missing-generic-family-keyword": null,
-    "no-missing-end-of-source-newline": null,
     "no-empty-source": null,
     "shorthand-property-no-redundant-values": null,
     "block-no-empty": null,
-    "indentation": 2,
-    "string-quotes": "single",
     "no-duplicate-selectors": true,
     "color-hex-length": "long",
     "color-named": "never",
     "selector-no-qualifying-type": true,
-    "selector-combinator-space-after": "always",
     "selector-attribute-quotes": "always",
-    "selector-attribute-operator-space-before": "never",
-    "declaration-block-trailing-semicolon": "always",
-    "declaration-colon-space-before": "never",
-    "declaration-colon-space-after": "always",
     "property-no-vendor-prefix": true,
     "value-no-vendor-prefix": true,
     "at-rule-no-vendor-prefix": true,
     "selector-pseudo-element-colon-notation": "single",
     "selector-no-vendor-prefix": true,
-    "media-feature-range-operator-space-before": "always",
-    "media-feature-range-operator-space-after": "always",
-    "media-feature-parentheses-space-inside": "never",
-    "media-feature-name-no-vendor-prefix": true,
-    "media-feature-colon-space-before": "never",
-    "media-feature-colon-space-after": "always",
-    "max-empty-lines": null,
+    "media-feature-name-no-vendor-prefix": true
   }
-}
+}

CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.19...v1.1.0) (2023-04-03)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.19](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.18...v1.1.0-alpha.19) (2023-04-03)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.18](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.17...v1.1.0-alpha.18) (2023-04-03)
+
+**Note:** Version bump only for package papanasi
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.17](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.16...v1.1.0-alpha.17) (2023-04-02)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.16](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.15...v1.1.0-alpha.16) (2023-04-02)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.15](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.14...v1.1.0-alpha.15) (2023-04-01)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.14](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.13...v1.1.0-alpha.14) (2023-04-01)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.13](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.12...v1.1.0-alpha.13) (2023-03-28)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.12](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.11...v1.1.0-alpha.12) (2023-03-25)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.11](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.10...v1.1.0-alpha.11) (2023-03-22)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.10](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.9...v1.1.0-alpha.10) (2023-03-22)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.9](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.7...v1.1.0-alpha.9) (2023-03-21)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.7](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.6...v1.1.0-alpha.7) (2023-03-21)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.6](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.5...v1.1.0-alpha.6) (2023-03-21)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.5](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.4...v1.1.0-alpha.5) (2023-03-20)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.4](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.3...v1.1.0-alpha.4) (2023-03-20)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.3](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.1...v1.1.0-alpha.3) (2023-03-20)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.1](https://github.com/CKGrafico/papanasi/compare/v1.1.0-alpha.0...v1.1.0-alpha.1) (2023-03-19)
+
+**Note:** Version bump only for package papanasi
+
+# [1.1.0-alpha.0](https://github.com/CKGrafico/papanasi/compare/v1.0.2...v1.1.0-alpha.0) (2023-03-19)
+
+**Note:** Version bump only for package papanasi
+
 ## [1.0.2](https://github.com/CKGrafico/papanasi/compare/v1.0.1...v1.0.2) (2022-12-29)
 
 **Note:** Version bump only for package papanasi

README.md

@@ -38,7 +38,7 @@
       <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg" width="50" title="Qwik"> <br/>
       <strong>Qwik</strong> <br/>
       <sub>
-        <a href="https://stackblitz.com/edit/qwik-starter-i6prxe" target="_blank"><img src="https://img.shields.io/badge/Stackblitz-Qwik-5048d7?logoColor=white&logo=stackblitz" alt="Qwik Sandbox" /></a>
+        <a href="https://stackblitz.com/edit/qwik-starter-45qzw4" target="_blank"><img src="https://img.shields.io/badge/Stackblitz-Qwik-5048d7?logoColor=white&logo=stackblitz" alt="Qwik Sandbox" /></a>
         <a href="https://www.npmjs.com/package/@papanasi/qwik" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/qwik?label=Installs&color=blue&logoColor=white&logo=qwiklabs" alt="Qwik downloads" /></a>
       </sub>
     </td>
@@ -109,21 +109,21 @@
       <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg" width="41" title="Svelte Kit"> <br/>
       <strong>Svelte Kit</strong> <br/>
       <sub>
-        <a href="https://codesandbox.io/p/sandbox/cranky-lamport-2t12j5" target="_blank"><img src="https://img.shields.io/badge/Demo-FF3E00?logoColor=white&logo=svelte" alt="Svelte Kit Demo" /></a>
+        <a href="https://codesandbox.io/p/sandbox/papanasi-sveltekit-demo-papanasi-svelte-fz7ody" target="_blank"><img src="https://img.shields.io/badge/Demo-FF3E00?logoColor=white&logo=svelte" alt="Svelte Kit Demo" /></a>
       </sub>
     </td>
     <td align="center" width="140">
       <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg" width="41" title="Solid Create"> <br/>
       <strong>Solid Start</strong> <br/>
       <sub>
-        <a href="https://codesandbox.io/p/github/CKGrafico/solid-start-simple/draft/loving-drake?file=%2Fsrc%2Froutes%2Findex.tsx" target="_blank"><img src="https://img.shields.io/badge/Demo-2e5593?logoColor=white&logo=solid" alt="Solid Start Demo" /></a>
+        <a href="https://codesandbox.io/p/sandbox/solid-este-si-4mpxrp" target="_blank"><img src="https://img.shields.io/badge/Demo-2e5593?logoColor=white&logo=solid" alt="Solid Start Demo" /></a>
       </sub>
     </td>
     <td align="center" width="140">
       <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg" width="41" title="Qwik City"> <br/>
       <strong>Qwik City</strong> <br/>
       <sub>
-        <a href="https://stackblitz.com/edit/qwik-starter-tudfze" target="_blank"><img src="https://img.shields.io/badge/Demo-5048d7?logoColor=white&logo=qwiklabs" alt="Svelte Kit Demo" /></a>
+        <a href="https://stackblitz.com/edit/qwik-starter-tudfze" target="_blank"><img src="https://img.shields.io/badge/Demo-5048d7?logoColor=white&logo=qwiklabs" alt="Qwik Demo" /></a>
       </sub>
     </td>
   </tr>

compiler/base.compiler.js

@@ -1,14 +1,13 @@
-const glob = require('glob');
-const fs = require('fs-extra');
-const path = require('path');
-const postcss = require('postcss');
-const postcssConfig = require('../postcss.config');
-const filesystemTools = require('gluegun/filesystem');
-const stringTools = require('gluegun/strings');
-const printTools = require('gluegun/print');
-const commandLineArgs = require('command-line-args');
-const ora = require('ora');
-const compileCommand = require('@builder.io/mitosis-cli/dist/commands/compile');
+import compileCommand from '@builder.io/mitosis-cli/dist/commands/compile.js';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs-extra';
+import glob from 'glob';
+import filesystemTools from 'gluegun/filesystem.js';
+import printTools from 'gluegun/print.js';
+import stringTools from 'gluegun/strings.js';
+import ora from 'ora';
+import path from 'path';
+import postcss from 'postcss';
 
 const DEFAULT_OPTIONS = {
   elements: 'src/**/*.lite.tsx',
@@ -17,6 +16,7 @@ const DEFAULT_OPTIONS = {
   target: '',
   extension: '',
   state: '',
+  api: '',
   styles: '',
   customReplace: (outFile, isFirstCompilation) => null
 };
@@ -85,7 +85,9 @@ async function compile(defaultOptions) {
         .map((fileName) => {
           const file = path.parse(fileName);
           const name = file.name.replace('.lite', '');
-          return `export { default as ${pascalName(name)} } from './${file.dir.replace('src/', '')}';`;
+          return `export { default as ${pascalName(name)} } from './${file.dir
+            .replace(/\\/g, '/')
+            .replace('src/', '')}';`;
         })
         .join('\n');
     }
@@ -94,6 +96,7 @@ async function compile(defaultOptions) {
     const indexResult = indexData
       // Export only needed components
       .replace(/(\/\/ Init Components)(.+?)(\/\/ End Components)/s, `$1\n${fileExports}\n$3`)
+      // Set the current platform
       .replace(/Platform.Default/g, `Platform.${pascalName(options.target)}`);
 
     fs.writeFileSync(`${outPath}/src/index.ts`, indexResult, 'utf8');
@@ -103,13 +106,17 @@ async function compile(defaultOptions) {
     const file = path.parse(filepath);
     const outFile = `${outPath}/${file.dir}/${file.name.replace('.lite', '')}.${options.extension}`;
 
+    let to = options.target === 'webcomponents' ? 'webcomponent' : options.target;
+    to = to === 'vue' ? 'vue3' : to;
+
     await compileCommand.run({
       parameters: {
         options: {
           from: 'mitosis',
-          to: options.target === 'webcomponents' ? 'webcomponent' : options.target,
+          to,
           out: outFile,
           force: true,
+          api: options.api,
           state: options.state,
           styles: options.styles
         },
@@ -135,6 +142,8 @@ async function compile(defaultOptions) {
   }
 
   async function compileCssFileForOutputSrc(outFile) {
+    const postcssConfig = (await import('../postcss.config.cjs')).default;
+
     const name = outFile.replace(/\..*/, '.css');
     const data = fs.readFileSync(name, 'utf8');
     const result = await postcss(postcssConfig.plugins).process(data, { from: name, to: name });
@@ -144,19 +153,21 @@ async function compile(defaultOptions) {
   for (const fileName of files) {
     const file = path.parse(fileName);
     const isFirstCompilation = !fs.existsSync(`${outPath}/src`) || options.isDev;
+    const name = file.name.replace('.lite', '');
+    const namePascal = pascalName(name);
 
     spinner.text = fileName;
 
     copyBasicFilesOnFirstCompilation(isFirstCompilation, fileName);
     const { outFile } = await compileMitosisComponent(fileName);
     replacePropertiesFromCompiledFiles(outFile);
-    options.customReplace({ file, outFile, outPath, isFirstCompilation });
+    options.customReplace({ name, pascalName: namePascal, file, outFile, outPath, isFirstCompilation });
     await compileCssFileForOutputSrc(outFile);
 
     spinner.stop();
   }
 }
 
-module.exports = {
+export default {
   compile
 };

compiler/compiler.tasks.js

@@ -1,5 +1,5 @@
-const { Listr } = require('listr2');
-const commandLineArgs = require('command-line-args');
+import commandLineArgs from 'command-line-args';
+import { Listr } from 'listr2';
 
 const optionDefinitions = [
   { name: 'elements', alias: 'e', type: String, multiple: true },
@@ -93,7 +93,7 @@ const optionDefinitions = [
       title: `Bundle Packages: ${cliConfig.platforms?.join(', ') || ''}`,
       task: () =>
         execa(
-          `yarn lerna --scope=@papanasi/${
+          `yarn lerna --verbose --scope=@papanasi/${
             cliConfig.platforms.length > 1 ? `{${cliConfig.platforms?.join(',')}}` : cliConfig.platforms
           } build`
         ).catch((error) => {

compiler/dev.tasks.js

@@ -1,7 +1,7 @@
-const { Listr } = require('listr2');
-const chokidar = require('chokidar');
-const path = require('path');
-const ora = require('ora');
+import chokidar from 'chokidar';
+import { Listr } from 'listr2';
+import ora from 'ora';
+import path from 'path';
 
 (async () => {
   const execa = (await import('execa')).command;
@@ -31,7 +31,7 @@ const ora = require('ora');
     {
       title: 'Bundle React',
       task: () =>
-        execa('yarn lerna --scope=@papanasi/react build').catch((error) => {
+        execa('yarn lerna --verbose --scope=@papanasi/react build').catch((error) => {
           throw new Error('Error bundling React ' + error);
         })
     },
@@ -51,7 +51,7 @@ const ora = require('ora');
 
           try {
             await execa('node ./compiler/platforms/react --dev');
-            await execa('yarn lerna --scope=@papanasi/react build');
+            await execa('yarn lerna --verbose --scope=@papanasi/react build');
           } catch (e) {
             spinner.text = `Error compiling ${e.message}.`;
             spinner.fail();

compiler/index.js

@@ -1 +1 @@
-require('./compiler.tasks');
+import './compiler.tasks.js';