ether-code 0.1.6 → 0.1.7

package/generators/html-generator.js

@@ -5,96 +5,16 @@ class HTMLGenerator {
     this.i18n = null
     this.indent = 0
     this.output = ''
-    this.tagMap = {}
-    this.attrMap = {}
-    this.eventMap = {}
-    this.inputTypeMap = {}
     this.voidElements = [
       'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
       'link', 'meta', 'param', 'source', 'track', 'wbr'
     ]
     
-    this.buildGenericMaps()
-    
     if (i18nPath) {
       this.loadI18n(i18nPath)
     }
   }
 
-  buildGenericMaps() {
-    this.tagMap = {
-      'division': 'div', 'paragraphe': 'p', 'portee': 'span',
-      'titre1': 'h1', 'titre2': 'h2', 'titre3': 'h3', 'titre4': 'h4', 'titre5': 'h5', 'titre6': 'h6',
-      'lien': 'a', 'image': 'img', 'bouton': 'button',
-      'formulaire': 'form', 'champ': 'input', 'zone texte': 'textarea',
-      'sélection': 'select', 'selection': 'select', 'option': 'option', 'étiquette': 'label', 'étiquette': 'label',
-      'liste': 'ul', 'liste ordonnée': 'ol', 'élément': 'li', 'élément liste': 'li',
-      'tableau': 'table', 'ligne': 'tr', 'cellule': 'td', 'entête cellule': 'th', 'entete cellule': 'th',
-      'corps tableau': 'tbody', 'entête tableau': 'thead', 'pied tableau': 'tfoot',
-      'entête': 'header', 'piedpage': 'footer', 'navigation': 'nav',
-      'section': 'section', 'article': 'article', 'côté': 'aside', 'principal': 'main',
-      'figure': 'figure', 'legende': 'figcaption',
-      'gras': 'strong', 'italique': 'em', 'souligne': 'u', 'barre': 's',
-      'code': 'code', 'preformate': 'pre', 'citation': 'blockquote',
-      'abreviation': 'abbr', 'temps': 'time', 'marque': 'mark',
-      'indice': 'sub', 'exposant': 'sup',
-      'video': 'video', 'audio': 'audio', 'cadre': 'iframe', 'toile': 'canvas',
-      'details': 'details', 'résumé': 'summary', 'resume': 'summary', 'dialogue': 'dialog',
-      'progression': 'progress', 'metre': 'meter',
-      'groupe champs': 'fieldset', 'legende groupe': 'legend',
-      'liste données': 'datalist', 'liste donnees': 'datalist', 'sortie': 'output',
-      'modele': 'template', 'emplacement': 'slot',
-      'saut ligne': 'br', 'ligne horizontale': 'hr', 'cesure': 'wbr', 'meta': 'meta',
-      'lien externe': 'link'
-    }
-    
-    this.attrMap = {
-      'classe': 'class', 'identifiant': 'id', 'nom': 'name', 'valeur': 'value',
-      'type': 'type', 'adresse': 'href', 'source': 'src', 'alternatif': 'alt',
-      'titre': 'title', 'cible': 'target', 'relation': 'rel',
-      'largeur': 'width', 'hauteur': 'height',
-      'placeholder': 'placeholder', 'indicateur': 'placeholder',
-      'requis': 'required', 'desactive': 'disabled', 'lecture seule': 'readonly',
-      'coche': 'checked', 'selectionne': 'selected',
-      'minimum': 'min', 'maximum': 'max', 'pas': 'step',
-      'lignes': 'rows', 'colonnes': 'cols',
-      'fusion colonnes': 'colspan', 'fusion lignes': 'rowspan',
-      'pour': 'for', 'méthode': 'method', 'action': 'action',
-      'accepter': 'accept', 'autocomplete': 'autocomplete',
-      'focus auto': 'autofocus', 'motif': 'pattern',
-      'longueur min': 'minlength', 'longueur max': 'maxlength',
-      'controles': 'controls', 'boucle': 'loop', 'muet': 'muted', 'lecture auto': 'autoplay',
-      'editable': 'contenteditable', 'deplacable': 'draggable', 'cache': 'hidden',
-      'index tabulation': 'tabindex', 'langue': 'lang', 'direction': 'dir',
-      'chargement': 'loading', 'datetime': 'datetime',
-      'aria étiquette': 'aria-label', 'aria decrit par': 'aria-describedby',
-      'aria cache': 'aria-hidden', 'aria étendu': 'aria-expanded',
-      'role': 'role', 'valeur défaut': 'defaultValue', 'coché défaut': 'defaultChecked'
-    }
-    
-    this.attrValueMap = {
-      'nouvelle fenetre': '_blank', 'nouvel onglet': '_blank',
-      'meme fenetre': '_self', 'parent': '_parent', 'haut': '_top',
-      'paresseux': 'lazy', 'immediat': 'eager'
-    }
-    
-    this.eventMap = {
-      'au clic': 'onclick', 'au double clic': 'ondblclick',
-      'au changement': 'onchange', 'a la soumission': 'onsubmit',
-      'au survol': 'onmouseover', 'au survol fin': 'onmouseout',
-      'au focus': 'onfocus', 'au focus perdu': 'onblur',
-      'touche bas': 'onkeydown', 'touche haut': 'onkeyup',
-      'au chargement': 'onload', 'erreur': 'onerror'
-    }
-    
-    this.inputTypeMap = {
-      'texte': 'text', 'mot de passe': 'password', 'courriel': 'email',
-      'nombre': 'number', 'case a cocher': 'checkbox', 'bouton radio': 'radio',
-      'fichier': 'file', 'date': 'date', 'intervalle': 'range',
-      'soumettre': 'submit', 'reinitialiser': 'reset', 'cache': 'hidden'
-    }
-  }
-
   loadI18n(filePath) {
     const content = fs.readFileSync(filePath, 'utf-8')
     this.i18n = JSON.parse(content)
@@ -161,7 +81,9 @@ class HTMLGenerator {
 
   translateTag(tag) {
     const lower = tag.toLowerCase()
-    return this.tagMap[lower] || this.translateGenericTag(tag)
+    let result = this.tagMap[lower] || this.translateGenericTag(tag)
+    result = result.replace(/^<|>$/g, '').trim()
+    return result
   }
 
   translateAttribute(attr) {
@@ -179,14 +101,14 @@ class HTMLGenerator {
       'lien': 'link',
       'style': 'style',
       'script': 'script',
-      'entête': 'header',
+      'entete': 'header',
       'piedpage': 'footer',
       'navigation': 'nav',
       'principal': 'main',
       'section': 'section',
       'article': 'article',
       'aside': 'aside',
-      'côté': 'aside',
+      'cote': 'aside',
       'recherche': 'search',
       'adresse': 'address',
       'titre1': 'h1',
@@ -204,25 +126,23 @@ class HTMLGenerator {
       'figure': 'figure',
       'legende': 'figcaption',
       'liste': 'ul',
-      'liste ordonnée': 'ol',
-      'élément': 'li',
+      'liste ordonnee': 'ol',
+      'element': 'li',
       'definition': 'dl',
       'terme': 'dt',
       'description': 'dd',
       'tableau': 'table',
       'ligne': 'tr',
       'cellule': 'td',
-      'entête cellule': 'th',
       'entete cellule': 'th',
-      'entête tableau': 'thead',
+      'entete tableau': 'thead',
       'corps tableau': 'tbody',
       'pied tableau': 'tfoot',
       'formulaire': 'form',
-      'étiquette': 'label',
-      'étiquette': 'label',
+      'etiquette': 'label',
       'champ': 'input',
       'zone texte': 'textarea',
-      'sélection': 'select',
+      'selection': 'select',
       'option': 'option',
       'groupe options': 'optgroup',
       'bouton': 'button',
@@ -264,14 +184,13 @@ class HTMLGenerator {
       'saut ligne': 'br',
       'retour ligne': 'br',
       'details': 'details',
-      'résumé': 'summary',
       'resume': 'summary',
       'dialogue': 'dialog',
       'menu': 'menu',
       'modele': 'template',
       'slot': 'slot',
       'emplacement': 'slot',
-      'données': 'data',
+      'donnees': 'data',
       'metre': 'meter',
       'progression': 'progress',
       'sortie': 'output',
@@ -283,9 +202,7 @@ class HTMLGenerator {
       'wbr': 'wbr',
       'cesure': 'wbr',
       'noscript': 'noscript',
-      'sans script': 'noscript',
-      'liste données': 'datalist',
-      'liste donnees': 'datalist'
+      'sans script': 'noscript'
     }
 
     const lower = tag.toLowerCase()
@@ -318,7 +235,7 @@ class HTMLGenerator {
       'chargement': 'loading',
       'paresseux': 'lazy',
       'action': 'action',
-      'méthode': 'method',
+      'methode': 'method',
       'type': 'type',
       'nom': 'name',
       'valeur': 'value',
@@ -361,9 +278,9 @@ class HTMLGenerator {
       'media': 'media',
       'type media': 'media',
       'charset': 'charset',
-      'encodage caractères': 'charset',
-      'asynchrone': 'asynchrone',
-      'asynchrone': 'asynchrone',
+      'encodage caracteres': 'charset',
+      'async': 'async',
+      'asynchrone': 'async',
       'defer': 'defer',
       'differer': 'defer',
       'crossorigin': 'crossorigin',
@@ -375,7 +292,7 @@ class HTMLGenerator {
       'bac a sable': 'sandbox',
       'allow': 'allow',
       'autoriser': 'allow',
-      'données': 'data',
+      'donnees': 'data',
       'accesskey': 'accesskey',
       'touche acces': 'accesskey',
       'translate': 'translate',
@@ -383,7 +300,7 @@ class HTMLGenerator {
       'spellcheck': 'spellcheck',
       'orthographe': 'spellcheck',
       'enterkeyhint': 'enterkeyhint',
-      'indice entrée': 'enterkeyhint',
+      'indice entree': 'enterkeyhint',
       'inputmode': 'inputmode',
       'mode saisie': 'inputmode',
       'is': 'is',
@@ -456,15 +373,17 @@ class HTMLGenerator {
 
     switch (node.type) {
       case 'Document':
-        this.generateDocument(node)
+      case 'document':
+        if (node.children) {
+          for (const child of node.children) {
+            this.generateNode(child)
+          }
+        }
         break
       case 'Element':
-      case 'élément':
+      case 'element':
         this.generateElement(node)
         break
-      case 'TextNode':
-        this.generateTextNode(node)
-        break
       case 'Text':
       case 'text':
         this.generateText(node)
@@ -480,72 +399,14 @@ class HTMLGenerator {
       default:
         if (node.tag || node.tagName) {
           this.generateElement(node)
-        } else if (node.text || node.content || node.value) {
+        } else if (node.text || node.content) {
           this.generateText(node)
         }
     }
   }
 
-  generateDocument(node) {
-    this.writeLine('<!DOCTYPE html>')
-    if (node.html) {
-      this.generateNodeWithCharset(node.html)
-    }
-  }
-
-  generateNodeWithCharset(node) {
-    if (node.type === 'Element' && node.htmlTag === 'html') {
-      const tag = 'html'
-      const attributes = this.generateAttributes(node.attributes || [])
-      this.writeLine(`<${tag}${attributes}>`)
-      this.indent++
-      
-      for (const child of (node.children || [])) {
-        if (child.htmlTag === 'head') {
-          this.generateHeadWithCharset(child)
-        } else {
-          this.generateNode(child)
-        }
-      }
-      
-      this.indent--
-      this.writeLine(`</${tag}>`)
-    } else {
-      this.generateNode(node)
-    }
-  }
-
-  generateHeadWithCharset(node) {
-    const tag = 'head'
-    const attributes = this.generateAttributes(node.attributes || [])
-    this.writeLine(`<${tag}${attributes}>`)
-    this.indent++
-    
-    this.writeLine('<meta charset="UTF-8">')
-    
-    for (const child of (node.children || [])) {
-      this.generateNode(child)
-    }
-    
-    this.indent--
-    this.writeLine(`</${tag}>`)
-  }
-
-  generateTextNode(node) {
-    if (node.value || node.content) {
-      this.writeLine(this.escapeHtml(node.value || node.content))
-    }
-  }
-
   generateElement(node) {
-    let tag
-    if (node.htmlTag && !node.htmlTag.startsWith('<')) {
-      tag = node.htmlTag
-    } else {
-      const rawTag = node.tag || node.tagName || node.name
-      tag = this.translateTag(rawTag)
-    }
-    
+    const tag = this.translateTag(node.tag || node.tagName || node.name)
     const attributes = this.generateAttributes(node.attributes || node.attrs || {})
     const isVoid = this.voidElements.includes(tag.toLowerCase())
 
@@ -585,73 +446,43 @@ class HTMLGenerator {
   }
 
   generateAttributes(attrs) {
-    if (!attrs || (Array.isArray(attrs) && attrs.length === 0) || Object.keys(attrs).length === 0) {
+    if (!attrs || Object.keys(attrs).length === 0) {
       return ''
     }
 
     const parts = []
-    
-    if (Array.isArray(attrs)) {
-      for (const attr of attrs) {
-        const attrName = attr.htmlName || this.translateAttribute(attr.name)
-        const value = attr.value
-        
-        if (value === true || value === '') {
-          parts.push(attrName)
-        } else if (value === false || value === null || value === undefined) {
-          continue
-        } else {
-          parts.push(`${attrName}="${this.escapeAttr(value)}"`)
-        }
+    for (const [key, value] of Object.entries(attrs)) {
+      let attrName = this.translateAttribute(key)
+      
+      if (attrName.startsWith('au ') || attrName.startsWith('a la ')) {
+        attrName = this.translateEvent(key)
       }
-    } else {
-      for (const [key, value] of Object.entries(attrs)) {
-        let attrName = this.translateAttribute(key)
-        
-        if (attrName.startsWith('au ') || attrName.startsWith('a la ')) {
-          attrName = this.translateEvent(key)
-        }
 
-        if (value === true || value === '') {
-          parts.push(attrName)
-        } else if (value === false || value === null || value === undefined) {
-          continue
-        } else {
-          let attrValue = this.translateAttrValue(value)
-          
-          if (attrName === 'type' && this.isInputType(value)) {
-            attrValue = this.translateInputType(value)
-          }
-          
-          parts.push(`${attrName}="${this.escapeAttr(attrValue)}"`)
+      if (value === true || value === '') {
+        parts.push(attrName)
+      } else if (value === false || value === null || value === undefined) {
+        continue
+      } else {
+        let attrValue = value
+        
+        if (attrName === 'type' && this.isInputType(value)) {
+          attrValue = this.translateInputType(value)
         }
+        
+        parts.push(`${attrName}="${this.escapeAttr(attrValue)}"`)
       }
     }
 
     return parts.length > 0 ? ' ' + parts.join(' ') : ''
   }
 
-  translateAttrValue(value) {
-    if (typeof value !== 'string') return value
-    const lower = value.toLowerCase()
-    
-    const valueMap = {
-      'nouvelle fenetre': '_blank', 'nouvel onglet': '_blank',
-      'meme fenetre': '_self', 'parent': '_parent', 'haut': '_top',
-      'paresseux': 'lazy', 'immediat': 'eager',
-      'post': 'post', 'get': 'get'
-    }
-    
-    return valueMap[lower] || value
-  }
-
   translateEvent(event) {
     const events = {
       'au clic': 'onclick',
       'au double clic': 'ondblclick',
       'au survol': 'onmouseover',
       'au survol fin': 'onmouseout',
-      'souris entrée': 'onmouseenter',
+      'souris entree': 'onmouseenter',
       'souris sortie': 'onmouseleave',
       'souris bas': 'onmousedown',
       'souris haut': 'onmouseup',
@@ -669,33 +500,33 @@ class HTMLGenerator {
       'au chargement': 'onload',
       'a la fermeture': 'onunload',
       'au redimensionnement': 'onresize',
-      'au défilement': 'onscroll',
+      'au defilement': 'onscroll',
       'erreur': 'onerror',
       'lecture': 'onplay',
       'pause': 'onpause',
       'fin': 'onended',
-      'glisser début': 'ondragstart',
+      'glisser debut': 'ondragstart',
       'glisser': 'ondrag',
       'glisser fin': 'ondragend',
-      'glisser entrée': 'ondragenter',
+      'glisser entree': 'ondragenter',
       'glisser sortie': 'ondragleave',
       'glisser survol': 'ondragover',
       'deposer': 'ondrop',
       'copier': 'oncopy',
       'couper': 'oncut',
       'coller': 'onpaste',
-      'toucher début': 'ontouchstart',
+      'toucher debut': 'ontouchstart',
       'toucher mouvement': 'ontouchmove',
       'toucher fin': 'ontouchend',
       'toucher annuler': 'ontouchcancel',
       'pointeur bas': 'onpointerdown',
       'pointeur haut': 'onpointerup',
       'pointeur mouvement': 'onpointermove',
-      'pointeur entrée': 'onpointerenter',
+      'pointeur entree': 'onpointerenter',
       'pointeur sortie': 'onpointerleave',
       'roue': 'onwheel',
       'menu contextuel': 'oncontextmenu',
-      'animation début': 'onanimationstart',
+      'animation debut': 'onanimationstart',
       'animation fin': 'onanimationend',
       'transition fin': 'ontransitionend'
     }