Init refactor

.storybook/components/Codesandbox.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Code } from '../../packages/react/src';
 import {
   generateAngularCodeSandboxLink,
   generatePreactCodeSandboxLink,
@@ -8,8 +9,7 @@ import {
   generateSvelteCodeSandboxLink,
   generateVueCodeSandboxLink,
   generateWebCodeSandboxLink
-} from '../../codesandbox';
-import { Code } from '../../packages/react/src';
+} from '../helpers';
 
 enum CodesandboxPlatform {
   Angular = 'angular',

.storybook/components/Customization.tsx

@@ -13,7 +13,7 @@ type CustomizationProps = {
 
 const templateCSS = (css, selector = '') => `/**
 * You can edit this code, just click inside and modify it.
-* Check all the variables at https://github.com/CKGrafico/papanasi/blob/main/styles/variables.css
+* Check all the variables at https://github.com/CKGrafico/papanasi/blob/main/src/styles/variables.css
 **/
 
 .docs-story ${selector} {${css.replace(/    /g, '  ')}}

codesandbox/codesandbox-angular.helper.ts → .storybook/helpers/codesandbox/codesandbox-angular.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateAngularCodeSandboxLink(options) {

codesandbox/codesandbox-preact.helper.ts → .storybook/helpers/codesandbox/codesandbox-preact.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generatePreactCodeSandboxLink(options) {

codesandbox/codesandbox-qwik.helper.ts → .storybook/helpers/codesandbox/codesandbox-qwik.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 
 export function generateQwikCodeSandboxLink(options) {
   const { components, extensions, code, dependencies } = options;

codesandbox/codesandbox-react.helper.ts → .storybook/helpers/codesandbox/codesandbox-react.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateReactCodeSandboxLink(options) {

codesandbox/codesandbox-solid.helper.ts → .storybook/helpers/codesandbox/codesandbox-solid.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateSolidCodeSandboxLink(options) {

codesandbox/codesandbox-svelte.helper.ts → .storybook/helpers/codesandbox/codesandbox-svelte.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateSvelteCodeSandboxLink(options) {

codesandbox/codesandbox-vue.helper.ts → .storybook/helpers/codesandbox/codesandbox-vue.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateVueCodeSandboxLink(options) {

codesandbox/codesandbox-web.helper.ts → .storybook/helpers/codesandbox/codesandbox-web.helper.ts

@@ -1,4 +1,4 @@
-import lernaJson from '../lerna.json';
+import lernaJson from '../../../lerna.json';
 import { generateCodeSandboxLink } from './codesandbox.helper';
 
 export function generateWebCodeSandboxLink(options) {

.storybook/helpers/index.ts

@@ -0,0 +1 @@
+export * from './codesandbox';

.storybook/main.js

@@ -1,4 +1,5 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 
 module.exports = {
   stories: ['../docs/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
@@ -22,6 +23,8 @@ module.exports = {
 
     options.cache.set = () => Promise.resolve();
 
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+
     return config;
   }
 };

.storybook/storybook.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@100;300;400;600&display=swap');
 
-@import '../styles/build.css';
-@import '../styles/variables.css';
+@import '../src/styles/build.css';
+@import '../src/styles/variables.css';
 
 /* Manager */
 .sidebar-item svg,

README.md

@@ -105,15 +105,15 @@
         <a href="https://codesandbox.io/p/sandbox/papanasi-nuxt-demo-papanasi-vue-xvguj1" target="_blank"><img src="https://img.shields.io/badge/Demo-00DC82?logoColor=white&logo=nuxtdotjs" alt="Nuxt Demo" /></a>
       </sub>
     </td>
-     <td align="center" width="140">
+    <td align="center" width="140">
       <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>
         Help needed to fix SSR
       </sub>
     </td>
-     <td align="center" width="140">
+    <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>

compiler/base.compiler.js

@@ -35,7 +35,7 @@ async function compile(defaultOptions) {
 
   const cliConfig = commandLineArgs(optionDefinitions);
   options.elements = cliConfig.elements
-    ? cliConfig.elements.map((file) => `src/${file}/${file}.lite.tsx`)
+    ? cliConfig.elements.map((file) => glob.sync(`src/**/${file}/${file}.lite.tsx`)).flat()
     : options.elements;
   options.isDev = !!cliConfig.dev;
 
@@ -48,36 +48,27 @@ async function compile(defaultOptions) {
       return;
     }
 
-    if (!fs.existsSync(`${outPath}/src`)) {
-      fs.mkdirSync(`${outPath}/src`);
-    }
-
-    fs.copySync('src/index.ts', `${outPath}/src/index.ts`);
-
-    const fileServices = cliConfig.elements ? `src/{${cliConfig.elements.join(',')},}` : 'src/**';
-    const srcFiles = [
-      ...glob.sync(`${fileServices}/*.{service,model}.ts`),
-      ...glob.sync(`src/tooltip/tooltip.ts`), // TODO improve
-      ...glob.sync(`styles/variables.css`),
-      'helpers',
-      'models'
-    ];
-    srcFiles.forEach((element) => {
-      const to = element.includes('src/') ? path.parse(element).base : element;
-      fs.copySync(element, `${outPath}/src/${to}`);
-    });
+    // Move src to all the package folder
+    fs.copySync('src', `${outPath}/src`);
 
-    const distFiles = glob.sync(`${outPath}/src/*.ts`);
+    // Remove unnecessary files moved
+    const unnecessaryFiles = glob.sync(`${outPath}/src/**/*.{mdx,tsx}`);
+    unnecessaryFiles.forEach((element) => fs.removeSync(element));
 
+    // Fix aliases
+    const distFiles = glob.sync(`${outPath}/src/**/*.{ts,css}`);
     distFiles.forEach((element) => {
       const data = fs.readFileSync(element, 'utf8');
       const result = data
         // Fix alias
-        .replace(/\~\//g, './');
+        .replace(/\~\//g, '../../../')
+        // Remove .lite
+        .replace(/\.lite/g, '');
 
       fs.writeFileSync(element, result, 'utf8');
     });
 
+    // Create specific README
     const data = fs.readFileSync('README.md', 'utf8');
     const result = data.replace(
       /\/\[target\].+/g,
@@ -90,12 +81,17 @@ async function compile(defaultOptions) {
       return;
     }
 
-    const fileExports = cliConfig.elements
-      .map((name) => {
-        return `export { default as ${name.charAt(0).toUpperCase() + name.slice(1)} } from './${name}';`;
+    // Export only the elements we want
+    const fileExports = options.elements
+      .map((fileName) => {
+        const file = path.parse(fileName);
+        const name = file.name.replace('.lite', '');
+        return `export { default as ${name.charAt(0).toUpperCase() + name.slice(1)} } from './${file.dir.replace(
+          'src/',
+          ''
+        )}';`;
       })
       .join('\n');
-
     const indexData = fs.readFileSync(`${outPath}/src/index.ts`, 'utf8');
     const indexResult = indexData.replace(
       /(\/\/ Init Components)(.+?)(\/\/ End Components)/s,
@@ -106,7 +102,7 @@ async function compile(defaultOptions) {
 
   async function compileMitosisComponent(filepath) {
     const file = path.parse(filepath);
-    const outFile = `${outPath}/src/${file.name.replace('.lite', '')}.${options.extension}`;
+    const outFile = `${outPath}/${file.dir}/${file.name.replace('.lite', '')}.${options.extension}`;
 
     await compileCommand.run({
       parameters: {
@@ -139,12 +135,8 @@ async function compile(defaultOptions) {
       // Meanwhile mitosis don't support import external types...
       .replace(
         'import',
-        `import { Dynamic, BaseProps, BaseState, CSS, Variant, Intent, BreakpointProps } from '../../../models';\nimport { ${toPascalCase(
-          name
-        )}Props, ${toPascalCase(name)}State } from './${name}.model';\nimport`
-      )
-      // Fix css import
-      .replace(/import ("|')\.\/(.+)\.css("|')\;/g, "import '../../../src/$2/$2.css';");
+        `import { ${toPascalCase(name)}Props, ${toPascalCase(name)}State } from './${name}.model';\nimport`
+      );
 
     fs.writeFileSync(outFile, result, 'utf8');
   }

compiler/dev.tasks.js

@@ -33,30 +33,28 @@ const ora = require('ora');
       task: async (ctx, task) => {
         task.title = 'Watching for changes';
 
-        return chokidar
-          .watch(['src/**/*', 'helpers/**/*', 'models/**/*', 'styles/**/*'])
-          .on('all', async (event, pathName) => {
-            if (event !== 'change') {
-              return;
-            }
+        return chokidar.watch(['src/**/*']).on('all', async (event, pathName) => {
+          if (event !== 'change') {
+            return;
+          }
 
-            const file = path.parse(pathName);
-            const name = file.dir.replace('src\\', '');
-            const spinner = ora(`Changed ${name}, compiling... `).start();
+          const file = path.parse(pathName);
+          const name = file.dir.replace('src\\', '');
+          const spinner = ora(`Changed ${name}, compiling... `).start();
 
-            try {
-              await execa('node ./compiler/platforms/react --dev');
-              await execa('yarn lerna --scope=@papanasi/react build');
-            } catch (e) {
-              spinner.text = `Error compiling ${e.message}.`;
-              spinner.fail();
+          try {
+            await execa('node ./compiler/platforms/react --dev');
+            await execa('yarn lerna --scope=@papanasi/react build');
+          } catch (e) {
+            spinner.text = `Error compiling ${e.message}.`;
+            spinner.fail();
 
-              return;
-            }
+            return;
+          }
 
-            spinner.text = 'Compiled successfully.';
-            spinner.succeed();
-          });
+          spinner.text = 'Compiled successfully.';
+          spinner.succeed();
+        });
       },
       options: {
         persistentOutput: true

compiler/platforms/qwik.js

@@ -15,9 +15,9 @@ const DEFAULT_OPTIONS = {
 
     const name = file.name.replace('.lite', '');
     const data = fs.readFileSync(outFile, 'utf8');
-    const result = data
-      // fix import css
-      .replace(/\.service"\;/g, `.service";\nimport '../../../src/${name}/${name}.css';`);
+    const result = data;
+    // fix import css
+    // .replace(/\.service"\;/g, `.service";\nimport '../../../src/${name}/${name}.css';`);
     fs.writeFileSync(outFile, result, 'utf8');
   }
 

compiler/platforms/svelte.js

@@ -19,9 +19,7 @@ const DEFAULT_OPTIONS = {
         .replace(/\'\;/g, ".svelte';")
         .replace(/\.css\.svelte/g, '.css')
         .replace(/helpers\.svelte/g, 'helpers')
-        .replace(/src\/(.*)\.svelte/g, 'src/$1')
-        // Remove broken imports
-        .replace(/\.\.\/\.\.\/\.\.\/(src\/)?/g, './');
+        .replace(/src\/(.*)\.svelte/g, 'src/$1');
 
       fs.writeFileSync(`${outPath}/src/index.ts`, result, 'utf8');
     }

compiler/platforms/vue.js

@@ -19,7 +19,7 @@ const DEFAULT_OPTIONS = {
         .replace(/\'\;/g, ".vue';")
         .replace(/\.css\.vue/g, '.css')
         .replace(/helpers\.vue/g, 'helpers')
-        .replace(/src\/(.*)\.vue/g, 'src/$1');
+        .replace(/(extensions)\/(.*)\.vue/g, '$1/$2');
 
       fs.writeFileSync(`${outPath}/src/index.ts`, result, 'utf8');
     }