ether-code 0.1.0

package/generators/react-generator.js

@@ -0,0 +1,599 @@
+const fs = require('fs')
+const { JSGenerator } = require('./js-generator')
+
+class ReactGenerator extends JSGenerator {
+  constructor(i18nPath = null) {
+    super(i18nPath)
+    this.reactMap = {}
+    this.hookMap = {}
+    
+    if (i18nPath) {
+      this.loadReactI18n(i18nPath)
+    }
+    
+    this.buildReactMaps()
+  }
+
+  loadReactI18n(filePath) {
+    const content = fs.readFileSync(filePath, 'utf-8')
+    const i18n = JSON.parse(content)
+    
+    const addToMap = (map, section) => {
+      if (!section) return
+      for (const [key, translations] of Object.entries(section)) {
+        if (translations && translations.fr && translations.react) {
+          map[translations.fr.toLowerCase()] = translations.react
+        }
+      }
+    }
+
+    for (const sectionName of Object.keys(i18n)) {
+      addToMap(this.reactMap, i18n[sectionName])
+    }
+  }
+
+  buildReactMaps() {
+    this.hookMap = {
+      'état': 'useState',
+      'utiliser état': 'useState',
+      'effet': 'useEffect',
+      'utiliser effet': 'useEffect',
+      'contexte': 'useContext',
+      'utiliser contexte': 'useContext',
+      'réducteur': 'useReducer',
+      'utiliser réducteur': 'useReducer',
+      'rappel': 'useCallback',
+      'utiliser rappel': 'useCallback',
+      'mémo': 'useMemo',
+      'utiliser mémo': 'useMemo',
+      'référence': 'useRef',
+      'utiliser référence': 'useRef',
+      'effet mise en page': 'useLayoutEffect',
+      'utiliser effet mise en page': 'useLayoutEffect',
+      'valeur imperative': 'useImperativeHandle',
+      'debug': 'useDebugValue',
+      'utiliser debug': 'useDebugValue',
+      'utiliser id': 'useId',
+      'transition': 'useTransition',
+      'utiliser transition': 'useTransition',
+      'valeur différée': 'useDeferredValue',
+      'utiliser valeur différée': 'useDeferredValue',
+      'effet insertion': 'useInsertionEffect',
+      'valeur sync externe': 'useSyncExternalStore'
+    }
+
+    this.componentMap = {
+      'fragment': 'Fragment',
+      'suspense': 'Suspense',
+      'limite erreur': 'ErrorBoundary',
+      'portail': 'Portal',
+      'strict': 'StrictMode',
+      'mode strict': 'StrictMode',
+      'profileur': 'Profiler'
+    }
+
+    this.apiMap = {
+      'créer élément': 'createElement',
+      'cloner élément': 'cloneElement',
+      'est élément valide': 'isValidElement',
+      'enfants': 'Children',
+      'créer ref': 'createRef',
+      'transferer ref': 'forwardRef',
+      'memoriser': 'mémo',
+      'paresseux': 'lazy',
+      'créer contexte': 'createContext',
+      'créer portail': 'createPortal'
+    }
+  }
+
+  translate(word) {
+    const lower = word.toLowerCase()
+    return this.hookMap[lower] || 
+           this.componentMap[lower] || 
+           this.apiMap[lower] || 
+           this.reactMap[lower] || 
+           super.translate(word)
+  }
+
+  generate(ast) {
+    this.output = ''
+    this.indent = 0
+
+    if (Array.isArray(ast)) {
+      for (const node of ast) {
+        const result = this.generateNode(node)
+        if (result !== undefined && result !== '' && this.output === '') {
+          return result
+        }
+      }
+    } else if (ast && ast.type) {
+      const result = this.generateNode(ast)
+      if (result !== undefined && result !== '' && this.output === '') {
+        return result
+      }
+    } else if (ast && ast.body) {
+      for (const node of ast.body) {
+        const result = this.generateNode(node)
+        if (result !== undefined && result !== '' && this.output === '') {
+          return result
+        }
+      }
+    }
+
+    return this.output.trim()
+  }
+
+  generateNode(node) {
+    if (!node) return ''
+
+    switch (node.type) {
+      case 'JSXElement':
+        return this.generateJSXElement(node)
+      case 'JSXFragment':
+        return this.generateJSXFragment(node)
+      case 'JSXText':
+        return this.generateJSXText(node)
+      case 'JSXExpression':
+      case 'JSXExpressionContainer':
+        return this.generateJSXExpression(node)
+      case 'JSXSpreadAttribute':
+        return this.generateJSXSpreadAttribute(node)
+      case 'JSXAttribute':
+        return this.generateJSXAttribute(node)
+      case 'ComponentDeclaration':
+        return this.generateComponent(node)
+      case 'HookCall':
+        return this.generateHookCall(node)
+      default:
+        return super.generateNode(node)
+    }
+  }
+
+  generateJSXElement(node) {
+    const tagName = this.translateJSXTag(node.openingElement?.name || node.name || node.tag)
+    const attributes = this.generateJSXAttributes(node.openingElement?.attributes || node.attributes || [])
+    const children = node.children || []
+    const selfClosing = node.selfClosing || node.openingElement?.selfClosing || children.length === 0
+
+    if (selfClosing && children.length === 0) {
+      return `<${tagName}${attributes} />`
+    }
+
+    let result = `<${tagName}${attributes}>`
+    
+    const hasComplexChildren = children.some(c => 
+      c.type === 'JSXElement' || c.type === 'JSXFragment' || 
+      (c.type === 'JSXText' && c.value?.includes('\n'))
+    )
+
+    if (hasComplexChildren) {
+      result += '\n'
+      this.indent++
+      for (const child of children) {
+        const childContent = this.generateJSXChild(child)
+        if (childContent.trim()) {
+          result += this.getIndent() + childContent + '\n'
+        }
+      }
+      this.indent--
+      result += this.getIndent() + `</${tagName}>`
+    } else {
+      for (const child of children) {
+        result += this.generateJSXChild(child)
+      }
+      result += `</${tagName}>`
+    }
+
+    return result
+  }
+
+  generateJSXFragment(node) {
+    const children = node.children || []
+    
+    if (children.length === 0) {
+      return '<></>'
+    }
+
+    let result = '<>\n'
+    this.indent++
+    
+    for (const child of children) {
+      const childContent = this.generateJSXChild(child)
+      if (childContent.trim()) {
+        result += this.getIndent() + childContent + '\n'
+      }
+    }
+    
+    this.indent--
+    result += this.getIndent() + '</>'
+
+    return result
+  }
+
+  generateJSXChild(child) {
+    if (!child) return ''
+
+    switch (child.type) {
+      case 'JSXElement':
+        return this.generateJSXElement(child)
+      case 'JSXFragment':
+        return this.generateJSXFragment(child)
+      case 'JSXText':
+        return this.generateJSXText(child)
+      case 'JSXExpressionContainer':
+      case 'JSXExpression':
+        return this.generateJSXExpression(child)
+      default:
+        if (typeof child === 'string') {
+          return child.trim()
+        }
+        return this.generateNode(child)
+    }
+  }
+
+  generateJSXText(node) {
+    const text = node.value || node.raw || ''
+    return text.trim()
+  }
+
+  generateJSXExpression(node) {
+    const expression = node.expression || node.value
+    if (!expression) return '{}'
+    
+    if (expression.type === 'JSXEmptyExpression') {
+      return '{/* */}'
+    }
+    
+    return '{' + this.generateNode(expression) + '}'
+  }
+
+  generateJSXAttributes(attributes) {
+    if (!attributes || attributes.length === 0) {
+      return ''
+    }
+
+    const parts = attributes.map(attr => {
+      if (attr.type === 'JSXSpreadAttribute') {
+        return this.generateJSXSpreadAttribute(attr)
+      }
+      return this.generateJSXAttribute(attr)
+    })
+
+    return ' ' + parts.join(' ')
+  }
+
+  generateJSXAttribute(attr) {
+    const name = this.translateJSXAttribute(attr.name?.name || attr.name)
+    const value = attr.value
+
+    if (value === null || value === undefined || value === true) {
+      return name
+    }
+
+    if (typeof value === 'string') {
+      return `${name}="${value}"`
+    }
+
+    if (value.type === 'JSXExpressionContainer' || value.type === 'JSXExpression') {
+      return `${name}=${this.generateJSXExpression(value)}`
+    }
+
+    if (value.type === 'Literal') {
+      if (typeof value.value === 'string') {
+        return `${name}="${value.value}"`
+      }
+      return `${name}={${this.generateLiteral(value)}}`
+    }
+
+    return `${name}={${this.generateNode(value)}}`
+  }
+
+  generateJSXSpreadAttribute(attr) {
+    const expression = attr.argument || attr.expression
+    return `{...${this.generateNode(expression)}}`
+  }
+
+  translateJSXTag(tag) {
+    if (typeof tag !== 'string') {
+      if (tag.type === 'JSXMemberExpression') {
+        return this.generateJSXMemberExpression(tag)
+      }
+      if (tag.type === 'Identifier') {
+        return this.translateJSXTag(tag.name)
+      }
+      return tag
+    }
+
+    const lower = tag.toLowerCase()
+    
+    if (this.componentMap[lower]) {
+      return this.componentMap[lower]
+    }
+
+    const translations = {
+      'division': 'div',
+      'paragraphe': 'p',
+      'titre1': 'h1',
+      'titre2': 'h2',
+      'titre3': 'h3',
+      'titre4': 'h4',
+      'titre5': 'h5',
+      'titre6': 'h6',
+      'portee': 'span',
+      'bouton': 'button',
+      'lien': 'a',
+      'image': 'img',
+      'formulaire': 'form',
+      'champ': 'input',
+      'zone texte': 'textarea',
+      'étiquette': 'label',
+      'etiquette': 'label',
+      'sélection': 'select',
+      'option': 'option',
+      'liste': 'ul',
+      'liste ordonnée': 'ol',
+      'élément liste': 'li',
+      'tableau': 'table',
+      'ligne': 'tr',
+      'cellule': 'td',
+      'entête 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',
+      'video': 'video',
+      'audio': 'audio',
+      'toile': 'canvas',
+      'cadre': 'iframe'
+    }
+
+    if (translations[lower]) {
+      return translations[lower]
+    }
+
+    if (/^[A-Z]/.test(tag)) {
+      return tag
+    }
+
+    return tag
+  }
+
+  translateJSXAttribute(attr) {
+    const lower = attr.toLowerCase()
+    
+    const translations = {
+      'classe': 'className',
+      'pour': 'htmlFor',
+      'style': 'style',
+      'au clic': 'onClick',
+      'au double clic': 'onDoubleClick',
+      'au changement': 'onChange',
+      'a la soumission': 'onSubmit',
+      'au survol': 'onMouseOver',
+      'au survol fin': 'onMouseOut',
+      'souris entrée': 'onMouseEnter',
+      'souris sortie': 'onMouseLeave',
+      'souris bas': 'onMouseDown',
+      'souris haut': 'onMouseUp',
+      'au focus': 'onFocus',
+      'au focus perdu': 'onBlur',
+      'touche bas': 'onKeyDown',
+      'touche haut': 'onKeyUp',
+      'touche presse': 'onKeyPress',
+      'au chargement': 'onLoad',
+      'erreur': 'onError',
+      'au défilement': 'onScroll',
+      'toucher début': 'onTouchStart',
+      'toucher mouvement': 'onTouchMove',
+      'toucher fin': 'onTouchEnd',
+      'glisser début': 'onDragStart',
+      'glisser': 'onDrag',
+      'glisser fin': 'onDragEnd',
+      'deposer': 'onDrop',
+      'copier': 'onCopy',
+      'coller': 'onPaste',
+      'valeur': 'value',
+      'valeur défaut': 'defaultValue',
+      'coche': 'checked',
+      'coché défaut': 'defaultChecked',
+      'desactive': 'disabled',
+      'lecture seule': 'readOnly',
+      'requis': 'required',
+      'placeholder': 'placeholder',
+      'indicateur': 'placeholder',
+      'type': 'type',
+      'nom': 'name',
+      'identifiant': 'id',
+      'référence': 'ref',
+      'clé': 'key',
+      'enfants': 'children',
+      'html interne': 'dangerouslySetInnerHTML',
+      'tabindex': 'tabIndex',
+      'largeur': 'width',
+      'hauteur': 'height',
+      'source': 'src',
+      'alternatif': 'alt',
+      'adresse': 'href',
+      'cible': 'target',
+      'role': 'role',
+      'aria étiquette': 'aria-label',
+      'aria etiquette': 'aria-label',
+      'aria decrit par': 'aria-describedby',
+      'aria cache': 'aria-hidden',
+      'aria étendu': 'aria-expanded',
+      'aria selectionne': 'aria-selected',
+      'aria desactive': 'aria-disabled'
+    }
+
+    if (translations[lower]) {
+      return translations[lower]
+    }
+
+    if (attr.startsWith('on') || attr.startsWith('aria-') || attr.startsWith('data-')) {
+      return attr
+    }
+
+    return attr
+  }
+
+  generateJSXMemberExpression(node) {
+    const object = node.object?.name || this.generateNode(node.object)
+    const property = node.property?.name || this.generateNode(node.property)
+    return `${object}.${property}`
+  }
+
+  generateComponent(node) {
+    const name = node.name || node.id?.name || 'Component'
+    const isArrow = node.arrow !== false
+    const props = node.props || node.params || []
+    const propsStr = this.generateComponentProps(props)
+
+    if (isArrow) {
+      this.writeLine(`const ${name} = (${propsStr}) => {`)
+    } else {
+      this.writeLine(`function ${name}(${propsStr}) {`)
+    }
+
+    this.indent++
+
+    if (node.hooks) {
+      for (const hook of node.hooks) {
+        this.generateHookCall(hook)
+      }
+      this.writeLine('')
+    }
+
+    if (node.handlers) {
+      for (const handler of node.handlers) {
+        this.generateNode(handler)
+      }
+      this.writeLine('')
+    }
+
+    if (node.return || node.render) {
+      const jsx = this.generateNode(node.return || node.render)
+      if (jsx.includes('\n')) {
+        this.writeLine('return (')
+        this.indent++
+        this.writeLine(jsx)
+        this.indent--
+        this.writeLine(');')
+      } else {
+        this.writeLine(`return ${jsx};`)
+      }
+    } else if (node.body) {
+      const body = node.body?.body || node.body || []
+      for (const stmt of body) {
+        this.generateNode(stmt)
+      }
+    }
+
+    this.indent--
+    this.writeLine('};')
+    this.writeLine('')
+  }
+
+  generateComponentProps(props) {
+    if (!props || props.length === 0) {
+      return ''
+    }
+
+    if (props.length === 1 && props[0].destructure) {
+      const destructured = props[0].properties || props[0].names || []
+      const propsList = destructured.map(p => {
+        if (typeof p === 'string') return p
+        const name = p.name || p.key
+        if (p.default !== undefined) {
+          return `${name} = ${this.generateNode(p.default)}`
+        }
+        return name
+      })
+      return `{ ${propsList.join(', ')} }`
+    }
+
+    return props.map(p => p.name || p).join(', ')
+  }
+
+  generateHookCall(node) {
+    const hookName = this.translate(node.hook || node.name)
+    const args = (node.arguments || node.args || []).map(a => this.generateNode(a))
+    
+    if (node.destructure) {
+      const [first, second] = node.destructure
+      if (second) {
+        this.writeLine(`const [${first}, ${second}] = ${hookName}(${args.join(', ')});`)
+      } else {
+        this.writeLine(`const ${first} = ${hookName}(${args.join(', ')});`)
+      }
+    } else if (node.result) {
+      this.writeLine(`const ${node.result} = ${hookName}(${args.join(', ')});`)
+    } else {
+      this.writeLine(`${hookName}(${args.join(', ')});`)
+    }
+  }
+
+  generateArrowFunction(node) {
+    if (node.jsx) {
+      const params = (node.params || []).map(p => this.generateNode(p)).join(', ')
+      const paramsStr = node.params?.length === 1 ? params : `(${params})`
+      const jsx = this.generateNode(node.body)
+      
+      if (jsx.includes('\n')) {
+        return `${paramsStr} => (\n${this.getIndent()}  ${jsx.split('\n').join('\n' + this.getIndent() + '  ')}\n${this.getIndent()})`
+      }
+      return `${paramsStr} => ${jsx}`
+    }
+    
+    return super.generateArrowFunction(node)
+  }
+
+  generateImportDeclaration(node) {
+    const source = this.generateLiteral(node.source)
+    const specifiers = node.specifiers || []
+
+    if (specifiers.length === 0) {
+      this.writeLine(`import ${source};`)
+      return
+    }
+
+    const defaultSpec = specifiers.find(s => s.type === 'ImportDefaultSpecifier')
+    const namespaceSpec = specifiers.find(s => s.type === 'ImportNamespaceSpecifier')
+    const namedSpecs = specifiers.filter(s => s.type === 'ImportSpecifier')
+
+    let importParts = []
+
+    if (defaultSpec) {
+      const name = defaultSpec.local?.name || defaultSpec.local
+      importParts.push(this.translate(name))
+    }
+
+    if (namespaceSpec) {
+      importParts.push(`* as ${this.generateNode(namespaceSpec.local)}`)
+    }
+
+    if (namedSpecs.length > 0) {
+      const named = namedSpecs.map(s => {
+        const imported = s.imported?.name || s.imported
+        const local = s.local?.name || s.local
+        const translatedImported = this.translate(imported)
+        const translatedLocal = this.translate(local)
+        return translatedImported === translatedLocal 
+          ? translatedImported 
+          : `${translatedImported} as ${translatedLocal}`
+      }).join(', ')
+      importParts.push(`{ ${named} }`)
+    }
+
+    this.writeLine(`import ${importParts.join(', ')} from ${source};`)
+  }
+}
+
+module.exports = {
+  ReactGenerator
+}