Migrate

.env

@@ -4,7 +4,7 @@
 # Start & ended with "/"
 # without docker base should be "/{{ YOUR _BASE }}/dist/front/www/"
 # docker usage: base will be always "/front/www/"
-VITE_APP_BASE="/front/www/"
+VITE_APP_BASE="/"
 
 # ------------------------------------------------------------------------------ DOCKER
 

.gitignore

@@ -1,15 +1,7 @@
 # Output application depend of project
-dist/front/.env
-dist/front/vendor
-dist/front/www/static
-dist/front/www/.htaccess
-dist/front/www/.htpasswd
-dist/front/www/sitemap.xml
+dist/front
 dist/api/web/app/.cache
 
-# Auto generated atoms
-src/atoms/atoms.ts
-
 vendor
 .env.local
 node_modules

.prettierignore

@@ -1,4 +1,4 @@
 dist
 node_modules
 src/mixins/mixins.less
-src/index.html
+index.html

config/config.js

@@ -9,31 +9,43 @@ export default {
   // public assets from this folder will be copied in build folder
   publicDir: resolve("src/public"),
 
+  // TODO revoir
   // folder to deploy on front server
   wwwDir: resolve("dist/front/www/"),
 
+  // outDir: where files are built
+  // If this value is change, add this new path in .gitignore
+  outDir: resolve("dist/front"),
+  outDirScripts: resolve("dist/front/_scripts"),
+  outDirClient: resolve("dist/front/client"),
+  outDirServer: resolve("dist/front/server"),
+  outDirStatic: resolve("dist/front/static"),
+
+  // TODO uniquement pour version PHP
   // Directory name of the build folder (will be cleaned before build)
   // If this value is change, modify "outDir" last folder with this new one
-  buildDirname: "static",
+  // buildDirname: "static",
 
+  // TODO uniquement pour version PHP
   // outDir: where files are built
   // last folder need to be sync with `buildDirname`
   // If this value is change, add this new path in .gitignore
-  outDir: resolve("dist/front/www/static/"),
+  // outDir: resolve("dist/front/www/static/"),
 
   // Input entry files array
   // Set the relative paths, don't resolve them.
   // This config is used only if the index is not generated by vite
   input: [
-    "src/index.tsx",
-    // ... other entry files
+    // "src/index.tsx",
   ],
 
   // --------------------------------------------------------------------------- TASKS
 
   // Build dotenv outDir array
   // This task can build the same dotenv files in different directories
-  buildDotenvOutDir: [resolve("dist/front/")],
+  buildDotenvOutDir: [
+    // resolve("dist/front/")
+  ],
 
   // Build htaccess
   htaccessTemplateFilePath: resolve(
@@ -44,6 +56,7 @@ export default {
   bundleType: ["react", "dom"],
   componentCompatibleFolders: ["components", "pages", "popin"],
   componentsTemplatesDir: resolve("config/tasks/scaffold-component/templates"),
+  twigTemplates: resolve("dist/web/app/themes/CherAmi/templates"),
 
   // Scaffold WP
   wpTheme: resolve("dist/api/web/app/themes/CherAmi"),

config/helpers/palette.js

@@ -0,0 +1,8 @@
+import couleur from "./couleur.js"
+
+export default {
+  blue: couleur.rgb(0, 180, 180),
+  grey: couleur.rgb(121, 121, 121),
+  green: couleur.rgb(57, 180, 0),
+  red: couleur.rgb(244, 34, 34),
+}

config/tasks/scaffold-component/scaffold-component.js

@@ -1,12 +1,11 @@
 import Inquirer from "inquirer"
 import changeCase from "change-case"
 import createFile from "../../helpers/create-file.js"
-
-import debug from "@wbe/debug"
-const log = debug("config:scaffold")
+import config from "../../config.js"
 import logs from "../../helpers/logger.js"
+import debug from "@wbe/debug"
 
-import config from "../../config.js"
+const log = debug("config:scaffold")
 
 // ----------------------------------------------------------------------------- PRIVATE API
 
@@ -59,6 +58,7 @@ const _domComponentBuilder = async ({
   componentPath,
   upperComponentName,
   componentsTemplatesDir,
+  twigComponentPath,
 }) => {
   // scaffold component file
   await createFile({
@@ -72,6 +72,12 @@ const _domComponentBuilder = async ({
     destinationFilePath: `${componentPath}/${upperComponentName}.less`,
     replaceExpressions: { upperComponentName },
   })
+  // scaffold Twig
+  await createFile({
+    templateFilePath: `${componentsTemplatesDir}/dom/component.twig.template`,
+    destinationFilePath: `${twigComponentPath}/${upperComponentName}.twig`,
+    replaceExpressions: { upperComponentName },
+  })
 }
 
 /**
@@ -104,6 +110,7 @@ const _scaffoldComponent = ({
     let upperComponentName = changeCase.pascalCase(componentName)
     // Base path of the component (no extension at the end here)
     let componentPath = `${srcDir}/${subFolder}/${lowerComponentName}`
+    let twigComponentPath = `${config.twigTemplates}/${subFolder}`
     log("component will be created here: componentPath", componentPath)
 
     // build REACT component
@@ -122,6 +129,7 @@ const _scaffoldComponent = ({
       await _domComponentBuilder({
         upperComponentName,
         componentPath,
+        twigComponentPath,
         componentCompatibleFolders,
         componentsTemplatesDir,
       })

config/tasks/scaffold-component/templates/dom/component.ts.template

@@ -1,51 +1,19 @@
-import './%%upperComponentName%%.less';
+import "./%%upperComponentName%%.less"
+import { Component } from "@wbe/compose"
 import debug from "@wbe/debug"
 
-const componentName = "%%upperComponentName%%";
-const log = debug(`front:${componentName}`);
+type TStaticProps = {}
+
+const componentName = "%%upperComponentName%%"
+const log = debug(`front:${componentName}`)
 
 /**
  * @name %%upperComponentName%%
  */
-class %%upperComponentName%% {
-
-  /**
-   * Prepare dependencies with DependencyManager
-   */
-  protected prepareDependencies() {}
-
-  /**
-   * Middleware called just before init sequence
-   */
-  protected beforeInit() {}
-
-  /**
-   * Target our root if not already defined via constructor params
-   */
-  protected targetRoot() {}
-
-  /**
-   * Prepare node targeting from $root
-   */
-  protected prepareNodes() {}
+export default class %%upperComponentName%% extends Component<TStaticProps> {
+  static attrName = componentName
 
-  /**
-   * Init components
-   */
-  protected initComponents() {}
-
-  /**
-   * Prepare events
-   */
-  protected prepareEvents() {}
-
-  /**
-   * Middleware called just after init sequence
-   */
-  protected afterInit() {}
+  mounted() {
 
+  }
 }
-
-
-export default %%upperComponentName%%;
-

config/tasks/scaffold-component/templates/dom/component.twig.template

@@ -0,0 +1,7 @@
+{#
+    %%upperComponentName%%
+    @props className {string}
+#}
+<div class="%%upperComponentName%% {{ className }}" data-component="%%upperComponentName%%">
+    %%upperComponentName%%
+</div>

docker-compose.yml

@@ -1,16 +1,17 @@
 version: "3.7"
 services:
   apache:
-    image: registry.gitlab.cher-ami.tv/docker/docker-images/php:7.4
+    image: registry.gitlab.cher-ami.tv/docker/docker-images/php:7.4-1
     ports:
       - "${DOCKER_APACHE_PORT:-4321}:80"
     volumes:
-      - "./dist:/app"
+      - "./:/app"
     working_dir: /app
   node:
     image: node:16.16.0
     ports:
       - "${DOCKER_NODE_PORT:-3000}:3000"
+      - "24678:24678"
     volumes:
       - "./:/app"
     working_dir: /app

index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="imagetoolbar" content="no" />
+    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title><!--meta-title--></title>
+    <meta name="description" content="<!--meta-description-->" />
+    <link rel="canonical" href="<!--meta-url-->" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="<!--meta-siteName-->" />
+    <meta property="og:url" content="<!--meta-url-->" />
+    <meta property="og:title" content="<!--meta-title-->" />
+    <meta property="og:description" content="<!--meta-description-->" />
+    <meta property="og:image" content="<!--meta-imageUrl-->" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="<!--meta-siteName-->" />
+    <meta name="twitter:url" content="<!--meta-url-->" />
+    <meta name="twitter:title" content="<!--meta-title-->" />
+    <meta name="twitter:description" content="<!--meta-description-->" />
+    <meta name="twitter:image" content="<!--meta-imageUrl-->" />
+  </head>
+
+  <body>
+    <div id="root"><!--app-html--></div>
+    <script type="module" src="/src/index.tsx"></script>
+    <script type="text/javascript">
+      window.__SSR_STATIC_PROPS__ = "<!--ssr-static-props-->"
+      window.__GLOBAL_DATA__ = "<!--ssr-global-data-->"
+    </script>
+  </body>
+</html>