5htp 0.0.2

package/src/compiler/common/babel/plugins/form.ts

@@ -0,0 +1,191 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+import { PluginObj } from '@babel/core'; 
+
+import * as types from '@babel/types'
+import generate from '@babel/generator';
+
+/*----------------------------------
+- WEBPACK RULE
+----------------------------------*/
+module.exports = {
+    test: "**/client/**/*.tsx",
+    plugins: [
+        [Plugin]
+    ]
+}
+
+const debug = false
+
+/*----------------------------------
+- PLUGIN
+----------------------------------*/
+function Plugin (babel) {
+
+    const t = babel.types as typeof types;
+
+    const plugin: PluginObj<{
+        fichier: string,
+        cancel: boolean
+    }> = {
+        pre(state) {
+
+            this.fichier = state.opts.filename as string;
+
+            if (!('useForm' in state.scope.bindings))
+                this.cancel = true;
+
+        },
+        visitor: {
+            JSXElement(instruction) {
+
+                if (this.cancel === true)
+                    return;
+
+                const balise = instruction.node.openingElement;
+
+                /*
+                    <Champs.metas.titre className="full" attrsChamp={{ className: "h1" }} />
+                */
+
+                if (!(
+                    balise.selfClosing === true
+                    &&
+                    balise.name.type === 'JSXMemberExpression'
+                    &&
+                    balise.name.property.type === 'JSXIdentifier'
+                ))
+                    return;
+
+                debug && console.log(`[compilation][babel][form] Original: `, generate(instruction.node).code);
+
+                // Si le premier element du memberexpression est Champ
+                let nomA: types.JSXMemberExpression | types.JSXIdentifier = balise.name;
+                while (nomA.type === 'JSXMemberExpression')
+                    nomA = nomA.object;
+                if (!nomA.name.startsWith('Champs'))
+                    return;
+
+                // Ne pas parcourir les élements enfant
+                // Avec .stop, babel arrête d'itérer les élements voisins à partir du 6ème - 7ème
+                //instruction.stop();
+                instruction.skip();
+
+                // Transformation de la lste des attributs en un objet
+                /*
+                    className="full" attrsChamp={{ className: "h1" }}
+
+                    =>
+
+                    { className: "full", attrsChamp: { className: "h1" } }
+                */
+                let objAttributs: types.ObjectProperty[] = [];
+                for (const attribut of balise.attributes)
+                    if (
+                        attribut.type === 'JSXAttribute' && 
+                        attribut.value !== undefined && 
+                        typeof attribut.name.name === "string"
+                    ) {
+
+                        let propValue: types.ObjectProperty["value"];
+                        if (attribut.value === null) // <Champ.titre autoFocus />
+                            propValue = t.booleanLiteral(true);
+                        else if (attribut.value.type !== 'JSXExpressionContainer')
+                            propValue = attribut.value;
+                        else if (attribut.value.expression.type !== 'JSXEmptyExpression')
+                            propValue = attribut.value.expression;
+                        else
+                            propValue = t.nullLiteral();
+
+                        objAttributs.push(
+                            t.objectProperty(
+                                t.identifier( attribut.name.name ),
+                                propValue
+                            )
+                        )
+                    }
+
+                // Traverse chaque branche du chemin du champ, dans l'ordre inverse
+                // NOTE: on aurai pu reconstituer le chemin et créer les memberexpressions en une seule itération
+                //      Mais le fait d ele faire en deux itérations rend le code plus claire et maintenable
+                let cheminComposant: string[] = []
+                let brancheA: types.JSXMemberExpression | types.JSXIdentifier = balise.name;
+                while (brancheA.type === 'JSXMemberExpression') {
+
+                    const { property } = brancheA;
+                    
+                    cheminComposant.unshift(property.name)
+                    brancheA = brancheA.object;
+                }
+
+                let cheminSchema: types.MemberExpression | types.OptionalMemberExpression = t.memberExpression( 
+                    t.identifier('Champs'), 
+                    t.identifier('schema') 
+                );
+                let cheminDonnees: types.MemberExpression | types.OptionalMemberExpression = t.memberExpression( 
+                    t.identifier('Champs'), 
+                    t.identifier('data') 
+                );
+                const iDerniereBranche = cheminComposant.length - 1
+                for (let iBranche = iDerniereBranche; iBranche >= 0; iBranche--) {
+
+                    const branche = cheminComposant[ iBranche ];
+
+                    cheminSchema = t.optionalMemberExpression(
+                        cheminSchema,
+                        t.identifier( branche ),
+                        undefined,
+                        true
+                    )
+
+                    if (iBranche !== iDerniereBranche)
+                        cheminDonnees = t.optionalMemberExpression(
+                            cheminDonnees,
+                            t.identifier(branche),
+                            undefined,
+                            true
+                        )
+
+                }
+
+                // Remplacement
+                /*
+                    {Champs._render( Champs.metas?.titre, Champs._data.metas?.titre, 'metas.titre', {
+                        className: "full",
+                        attrsChamp: { className: "h1" }
+                    })}
+                */
+                const remplacement = t.callExpression(
+
+                    // Champs.render
+                    t.memberExpression(
+                        t.identifier('Champs'),
+                        t.identifier('render')
+                    ),
+                    [
+                        // Champs.<chemin>
+                        cheminSchema,
+
+                        // Champs._data.<chemin>
+                        cheminDonnees,
+
+                        // Chemin
+                        t.stringLiteral( cheminComposant.join('.') ),
+
+                        // { <attrs> }
+                        t.objectExpression(objAttributs)
+                    ]
+                )
+
+                debug && console.log(`[compilation][babel][form] Remplacement: `, generate(remplacement).code );
+
+                instruction.replaceWith(remplacement);
+                
+            }
+        },
+    };
+
+    return plugin;
+}

package/src/compiler/common/babel/plugins/icones-svg.ts

@@ -0,0 +1,350 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import * as types from '@babel/types'
+
+import { PluginObj } from '@babel/core';
+
+export type TIndexIcones = { [chemin: string]: { id: string, nom: string, fichier: string } };
+
+/*----------------------------------
+- WEBPACK RULE
+----------------------------------*/
+module.exports = {
+    test: /\.(tsx|jsx|ts)$/,  // <i src="icon" /> et /* @icon */"icon"
+    plugins: [
+        [Plugin]
+    ]
+}
+
+const debug = false;
+
+const defaultIconsPack = 'regular';
+
+/*----------------------------------
+- PLUGIN
+----------------------------------*/
+const ids: string[] = []
+function Plugin (babel) {
+
+    const t = babel.types as typeof types;
+
+    const plugin: PluginObj<{
+        referencerIcone: (nomBrut: string) => string | null,
+        fichier: string,
+        traiter: boolean,
+        iconeTrouvee: boolean,
+        icones: TIndexIcones
+    }> = {
+        pre(state) {
+
+            this.fichier = state.opts.filename as string;
+
+            //console.log('SVG', fichier);
+
+            this.traiter = true;
+            this.iconeTrouvee = false;
+
+            this.icones = {}; // chemin => { id, nom }
+
+            this.referencerIcone = (nomBrut: string) => {
+              
+                // Décomposition & dossier par défaut
+                let [dossierIcone, nomIcone] = nomBrut.split('/');
+                if (nomIcone === undefined) {
+                    nomIcone = dossierIcone;
+                    dossierIcone = defaultIconsPack;
+                }
+
+                // Extraction des infos
+                const cheminIconeBrut = dossierIcone + '/' + nomIcone;
+                const cheminIcone =  cheminIconeBrut + '.svg';
+
+                // Référencement si pas déjà fait
+                if (this.icones[ cheminIconeBrut ] === undefined) {
+
+                    const id = nomBrut.replace(/\//g, '-');
+
+                    this.icones[ cheminIconeBrut ] = {
+                        //id: dossierIcone.substring(0, 1) + '-' + nomIcone,
+                        id: id,
+                        nom: nomBrut,
+                        fichier: cheminIcone
+                    };
+
+                }
+
+                this.iconeTrouvee = true;
+
+                debug && console.log(`[icons]`, nomBrut, '=>', this.icones[cheminIconeBrut].id);
+
+                ids.push(this.icones[cheminIconeBrut].id);
+
+                return this.icones[ cheminIconeBrut ].id;
+            }
+
+        },
+        visitor: {
+            Program: {
+
+                enter(path) {
+
+                    if (!this.traiter)
+                        return;
+
+                },
+            },
+
+            StringLiteral(path) {
+                
+                // Marquage d'une référence à une icon via un /* @icon */"<nom>"
+                if (
+                    path.node.leadingComments
+                    &&
+                    path.node.leadingComments.length !== 0
+                    &&
+                    path.node.leadingComments[0].value === ' @icon '
+                ) {
+
+                    // Remplacement par id
+                    const idIcone = this.referencerIcone(path.node.value);
+                    if (idIcone === null)
+                        return;
+                        
+                    path.replaceWith(
+                        t.stringLiteral(idIcone)
+                    );
+
+                    path.skip();
+
+                }
+            },
+
+            // { icon: "solid/<nom>" }
+            Property(path) {
+                if (
+                    path.node.key.type === 'Identifier'
+                    &&
+                    path.node.key.name === 'icon'
+                    &&
+                    path.node.value?.type === 'StringLiteral'
+                ) {
+
+                    // Remplacement par id
+                    const idIcone = this.referencerIcone(path.node.value.value);
+                    if (idIcone === null)
+                        return;
+
+                    path.replaceWith(
+                        t.objectProperty(
+                            t.identifier('icon'),
+                            t.stringLiteral( idIcone )
+                        )
+                    );
+
+                    path.skip();
+
+                }
+            },
+
+            JSXAttribute(path) {
+
+                // icon="solid/<nom>"
+                if (
+                    path.node.name.type === 'JSXIdentifier'
+                    &&
+                    path.node.name.name.startsWith("icon")
+                    &&
+                    path.node.value
+                ) {
+
+                    const nomAttr = path.node.name.name;
+                    const valAttr = path.node.value;
+                    let remplacement;
+
+                    // icon="solid/<nom>"
+                    if (valAttr.type === 'StringLiteral') {
+
+                        const idIcone = this.referencerIcone(valAttr.value);
+                        if (idIcone === null)
+                            return;
+
+                        remplacement = t.stringLiteral(idIcone)
+
+                    // icon={condition ? "solid/<nom>" : "solid/<nom>"}
+                    } else if (
+                        valAttr.type === 'JSXExpressionContainer'
+                        &&
+                        valAttr.expression.type === 'ConditionalExpression'
+                        &&
+                        valAttr.expression.consequent.type === 'StringLiteral'
+                        &&
+                        valAttr.expression.alternate.type === 'StringLiteral'
+                    ) {
+
+                        const idIcone1 = this.referencerIcone(valAttr.expression.consequent.value);
+                        const idIcone2 = this.referencerIcone(valAttr.expression.alternate.value);
+
+                        remplacement = t.jsxExpressionContainer(
+                            t.conditionalExpression(
+                                valAttr.expression.test,
+                                idIcone1 ? t.stringLiteral(idIcone1) : valAttr.expression.consequent,
+                                idIcone2 ? t.stringLiteral(idIcone2) : valAttr.expression.alternate,
+                                
+                            )
+                        )
+
+                    } else
+                        return;
+
+                    path.replaceWith(
+                        t.jsxAttribute(
+                            t.jsxIdentifier( nomAttr ),
+                            remplacement
+                        )
+                    );
+
+                    path.skip();
+                    
+                }
+            },
+
+            JSXElement(path) {
+
+                // <i  />
+                if (
+                    this.traiter
+                    &&
+                    path.node
+                    &&
+                    path.node.openingElement
+                    &&
+                    path.node.openingElement.name.type === 'JSXIdentifier'
+                    &&
+                    path.node.openingElement.name.name === 'i'
+                ) {
+
+                    // Extraction des attributs src et class
+                    const attrs: {[prop: string]: types.JSXAttribute["value"]} = {}
+                    let nouveauxAttributs = path.node.openingElement.attributes.filter((attribut) => {
+
+                        if (attribut.type === 'JSXAttribute' && attribut.name) {
+
+                            if (attribut.name.name === 'src') {
+                                attrs.src = attribut.value
+                                return false;
+                            } else if (attribut.name.name === 'class') {
+                                attrs.class = attribut.value
+                                return false;
+                            }
+                        }
+                        return true;
+                    });
+
+                    if (!attrs.src)
+                        return;
+
+                    // <i src="..." />
+                    let classeIcone: types.StringLiteral | types.BinaryExpression | undefined = undefined;
+
+                    // Chaine: On référence le nom de l'icon
+                    if (attrs.src.type === 'StringLiteral') {
+
+                        // <i src="spin" /> =>  <i class="svg-xxxxx spin" />
+                        let valSrc = attrs.src.value
+                        if (valSrc === 'spin') {
+
+                            const idIcone = this.referencerIcone('solid/spinner-third');
+                            if (idIcone === null)
+                                return;
+
+                            classeIcone = t.stringLiteral('svg-' + idIcone + ' spin');
+
+                        // <i src="regular/user" /> =>  <i class="svg-xxxxxx" />
+                        } else {
+
+                            const idIcone = this.referencerIcone(valSrc);
+                            if (idIcone === null)
+                                return;
+
+                            classeIcone = t.stringLiteral('svg-' + idIcone);
+                        }
+
+                    // Autre: on renomme src en class et contatène le préfixe "svg-"
+                    // <i src={icon} /> =>  <i class={"svg-" + icon} />
+                    } else if (attrs.src.type === 'JSXExpressionContainer' && attrs.src.expression.type !== 'JSXEmptyExpression') {
+
+                        classeIcone = t.binaryExpression(
+                            '+',
+                            t.stringLiteral('svg-'),
+                            attrs.src.expression
+                        );
+
+                    } else
+                        throw new Error(`Type de valeur non-géré pour l'attribut src: ${attrs.src.type}`);
+
+                    const origClass = attrs.class?.type !== 'JSXExpressionContainer'
+                        ? attrs.class
+                        : attrs.class.expression.type !== 'JSXEmptyExpression'
+                            ? attrs.class.expression
+                            : null
+
+                    path.replaceWith(
+
+                        // Balise <i>
+                        t.jsxElement(
+                            t.jsxOpeningElement(
+                                t.jsxIdentifier('i'),
+
+                                // Attributs
+                                [
+                                    ...nouveauxAttributs,
+                                    t.jsxAttribute(
+                                        t.jsxIdentifier("class"),
+
+                                        // Attribut class
+                                        // concatSrc doit toujours être en premier dans les binary expressions
+                                        // afin que le sélecteur CSS i[class^="svg-"] soit toujours valable
+                                        t.jsxExpressionContainer(
+                                            origClass // Concaténation si attribut déjà défini
+                                                ? t.binaryExpression(
+                                                    '+',
+                                                    classeIcone,
+
+                                                    t.binaryExpression(
+                                                        '+',
+                                                        t.stringLiteral(' '),
+                                                        origClass
+                                                    )
+                                                )
+                                                : classeIcone
+                                        )
+                                    )
+                                ]
+                            ),
+                            t.jsxClosingElement(
+                                t.jsxIdentifier('i')
+                            ),
+                            path.node.children,
+                            path.node.selfClosing
+                        )
+                    );
+                }
+            }
+        },
+        post(state) {
+
+            if (!this.traiter || !this.iconeTrouvee)
+                return;
+
+            //console.log('@@@@@@ TEST ICONE', this.icones['/home/gaetan/www/Professionnel/Node/framework/kernel/client/assets/img/icones/fa/free/brands/youtube.svg']);
+
+            state.metadata['icones-svg'] = this.icones;
+
+        }
+    };
+
+    return plugin;
+}