Develop

.gitignore

@@ -1,6 +1,5 @@
 # dirs
 node_modules/
-.vscode/
 coverage/
 dist/
 

.npmrc

@@ -0,0 +1 @@
+registry = http://registry.npmjs.org

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug tests single run",
+      "type": "node",
+      "request": "launch",
+      "env": { "CI": "true" },
+      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+      "args": ["--runInBand", "--no-cache", "-t should use unique name when multiple helpers exist for same attribute type$"],
+      "cwd": "${workspaceRoot}",
+      "outFiles":[
+          "${workspaceFolder}/dist/**/*.js",
+          "${workspaceFolder}/tests/**/*.js",
+          "${workspaceFolder}/src/**/*.js",
+          "!**/node_modules/**"
+      ],
+      "protocol": "inspector",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "preLaunchTask": "build"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "type": "shell",
+            "command": "yarn build"
+        }
+    ]
+}

index.d.ts

@@ -16,6 +16,8 @@ export function compile(hbsCode: string, isComponent?: boolean): string
  * @param [options.isComponent] Should return JSX code wrapped as a function component
  * @param [options.isModule] Should return generated code exported as default
  * @param [options.includeImport] Should include react import
+ * @param [options.alwaysIncludeContext] Should always contain a template's context reference within the top-level props
+ * @param [options.includeExperimentalFeatures] Should execute preprocessors to convert features not supported by the Glimmer parser (has limitations/restrictions)
  * @returns JSX code
  */
-export function compile(hbsCode: string, options?: { isComponent?: boolean; isModule?: boolean, includeImport?: boolean }): string
+export function compile(hbsCode: string, options?: { isComponent?: boolean; isModule?: boolean, includeImport?: boolean, alwaysIncludeContext?: boolean, includeExperimentalFeatures?: boolean }): string

package.json

@@ -1,11 +1,12 @@
 {
   "name": "handlebars-to-jsx",
-  "version": "0.1.5",
+  "version": "0.1.5-cr-2",
   "author": "Danakt Frost <danakt@protonmail.com>",
   "license": "MIT",
   "description": "Converts Handlebars template to React component",
   "main": "dist/index.js",
   "scripts": {
+    "update": "yarn upgrade glimmer-engine",
     "watch": "tsc --watch",
     "test": "jest",
     "build": "tsc",
@@ -20,12 +21,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/danakt/handlebars-to-jsx.git"
+    "url": "https://github.com/CAndRyan/handlebars-to-jsx.git"
   },
   "bugs": {
-    "url": "https://github.com/danakt/handlebars-to-jsx/issues"
+    "url": "https://github.com/CAndRyan/handlebars-to-jsx.git/issues"
   },
-  "homepage": "https://github.com/danakt/handlebars-to-jsx",
+  "homepage": "https://github.com/CAndRyan/handlebars-to-jsx.git",
   "typings": "index.d.ts",
   "devDependencies": {
     "@types/babel__generator": "^7.0.2",
@@ -34,7 +35,7 @@
     "@types/node": "^12.6.8",
     "@types/object-hash": "^1.3.0",
     "@types/prettier": "^1.18.0",
-    "eslint": "^8.6.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-config-standard": "^13.0.1",
     "eslint-plugin-arca": "^0.8.1",
@@ -50,14 +51,14 @@
     "prettier": "^1.18.2",
     "ts-jest": "^26.1.0",
     "ts-node": "^8.3.0",
-    "typescript": "^3.5.3",
+    "typescript": "^4.0.2",
     "typescript-eslint-parser": "^22.0.0"
   },
   "dependencies": {
     "@babel/generator": "^7.5.5",
     "@babel/parser": "^7.5.5",
     "@babel/types": "^7.5.5",
-    "@glimmer/syntax": "^0.38.4",
+    "glimmer-engine": "file:../forked-glimmer-vm",
     "is-self-closing": "^1.0.1",
     "react-attr-converter": "^0.3.1",
     "reserved-words": "^0.1.2"
@@ -74,7 +75,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsConfig": "tsconfig.json"
+        "tsconfig": "tsconfig.json"
       }
     },
     "testMatch": [
@@ -84,11 +85,19 @@
     "collectCoverageFrom": [
       "lib/**",
       "ui/**"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/_dependencies/"
+    ],
+    "roots": [
+      "<rootDir>/src/",
+      "<rootDir>/tests/"
     ]
   },
   "husky": {
     "hooks": {
-      "pre-push": "npm run build && npm test"
+      "pre-push": ""
     }
   }
 }

src/blockStatements.ts

@@ -1,14 +1,14 @@
-import { AST as Glimmer }                                                  from '@glimmer/syntax'
+import { AST as Glimmer }                                                  from 'glimmer-engine/dist/@glimmer/syntax'
 import * as Babel                                                          from '@babel/types'
 import { resolveExpression, createRootChildren, createPath, appendToPath } from './expressions'
 import { createFragment }                                                  from './elements'
-import { DEFAULT_NAMESPACE_NAME, DEFAULT_KEY_NAME }                        from './constants'
+import { DEFAULT_EACH_LOOP_NAMESPACE, DEFAULT_KEY_NAME }                        from './constants'
 
 /**
  * Resolves block type
  */
 export const resolveBlockStatement = (blockStatement: Glimmer.BlockStatement) => {
-  switch (blockStatement.path.original) {
+  switch ((blockStatement.path as Glimmer.PathExpression).original) {
     case 'if': {
       return createConditionStatement(blockStatement, false)
     }
@@ -21,8 +21,14 @@ export const resolveBlockStatement = (blockStatement: Glimmer.BlockStatement) =>
       return createEachStatement(blockStatement)
     }
 
+    // TODO: consider an alternative approach to handling 'with' statements...
+    // treat the inner contents as a separate template, maintaining the flatter property retrieval
+    case 'with': { // TODO: does this handle with-else by default?
+      return createConditionStatement(blockStatement, false)
+    }
+
     default: {
-      throw new Error(`Unexpected ${blockStatement.path.original} statement`)
+      throw new Error(`Unexpected ${(blockStatement.path as Glimmer.PathExpression).original} statement`)
     }
   }
 }
@@ -80,7 +86,7 @@ export const createEachStatement = (blockStatement: Glimmer.BlockStatement) => {
   )
 
   const mapCallback = Babel.arrowFunctionExpression(
-    [Babel.identifier(DEFAULT_NAMESPACE_NAME), Babel.identifier(DEFAULT_KEY_NAME)],
+    [Babel.identifier(DEFAULT_EACH_LOOP_NAMESPACE), Babel.identifier(DEFAULT_KEY_NAME)],
     wrappedCallbackChildren
   )
 

src/comments.ts

@@ -1,4 +1,4 @@
-import { AST as Glimmer } from '@glimmer/syntax'
+import { AST as Glimmer } from 'glimmer-engine/dist/@glimmer/syntax'
 import * as Babel         from '@babel/types'
 
 export const createComment = (

src/componentCreator.ts

@@ -1,7 +1,8 @@
 import * as Babel from '@babel/types'
+import { DEFAULT_GLOBAL_NAMESPACE } from './constants';
 
 /**
  * Creates arrow component
  */
 export const createComponent = (body: Babel.Expression) =>
-  Babel.arrowFunctionExpression([Babel.identifier('props')], body)
+  Babel.arrowFunctionExpression([Babel.identifier(DEFAULT_GLOBAL_NAMESPACE)], body)

src/constants.ts

@@ -1,5 +1,12 @@
+/** Default props name */
+export const DEFAULT_GLOBAL_NAMESPACE = 'props'
+
 /** Default namespace name */
-export const DEFAULT_NAMESPACE_NAME = 'item'
+export const DEFAULT_EACH_LOOP_NAMESPACE = 'item'
 
 /** @todo Describe me */
 export const DEFAULT_KEY_NAME = 'i'
+
+export const DEFAULT_PARTIAL_NAMESPACE = 'context'
+
+export const ATTRIBUTE_GENERATOR_HELPER_FUNCTION = 'generateAttributes';

src/elements.ts

@@ -1,9 +1,11 @@
-import { AST as Glimmer }                                  from '@glimmer/syntax'
-import * as Babel                                          from '@babel/types'
-import * as isSelfClosing                                  from 'is-self-closing'
-import * as convertHTMLAttribute                           from 'react-attr-converter'
-import { createConcat, resolveExpression, createChildren } from './expressions'
-import { createStyleObject }                               from './styles'
+import { AST as Glimmer }                                                    from 'glimmer-engine/dist/@glimmer/syntax'
+import * as Babel                                                            from '@babel/types'
+import * as isSelfClosing                                                    from 'is-self-closing'
+import * as convertHTMLAttribute                                             from 'react-attr-converter'
+import { createConcat, resolveExpression, createChildren, resolveStatement } from './expressions'
+import { createStyleObject }                                                 from './styles'
+import { getProgramOptions }                                                 from './programContext'
+import { DEFAULT_PARTIAL_NAMESPACE, ATTRIBUTE_GENERATOR_HELPER_FUNCTION }        from './constants'
 
 /**
  * Creates JSX fragment
@@ -26,10 +28,18 @@ export const createFragment = (
 /**
  * Coverts AttrNode to JSXAttribute
  */
-export const createAttribute = (attrNode: Glimmer.AttrNode): Babel.JSXAttribute | null => {
-  // Unsupported attribute
-  const reactAttrName = convertHTMLAttribute(attrNode.name)
+export const createAttribute = (attrNode: Glimmer.AttrNode): Babel.JSXAttribute | Babel.JSXSpreadAttribute | null => {
+  const { includeExperimentalFeatures } = getProgramOptions();
+  if (includeExperimentalFeatures && attrNode.name === ATTRIBUTE_GENERATOR_HELPER_FUNCTION) {
+    const customHelperIdentifier = Babel.identifier(ATTRIBUTE_GENERATOR_HELPER_FUNCTION);
+    const innerHelperStatement = (attrNode.value as Glimmer.ConcatStatement).parts[0];
+    const innerExpression = resolveStatement(innerHelperStatement);
+    const customHelperCallExpression = Babel.callExpression(customHelperIdentifier, [innerExpression]);
+
+    return Babel.jsxSpreadAttribute(customHelperCallExpression);
+  }
 
+  const reactAttrName = convertHTMLAttribute(attrNode.name)
   if (!/^[_\-A-z0-9]+$/.test(reactAttrName)) {
     return null
   }
@@ -48,7 +58,7 @@ export const createAttribute = (attrNode: Glimmer.AttrNode): Babel.JSXAttribute
     }
 
     case 'MustacheStatement': {
-      return Babel.jsxAttribute(name, Babel.jsxExpressionContainer(resolveExpression(value.path)))
+      return Babel.jsxAttribute(name, Babel.jsxExpressionContainer(resolveStatement(value)))
     }
 
     case 'ConcatStatement': {
@@ -83,3 +93,93 @@ export const convertElement = (node: Glimmer.ElementNode): Babel.JSXElement => {
     isElementSelfClosing
   )
 }
+
+const createObjectProperty = (hashPair: Glimmer.HashPair): Babel.ObjectProperty => {
+  const propertyNameIdentifier = Babel.identifier(hashPair.key);
+  const innerValueExpression = resolveExpression(hashPair.value);
+
+  return Babel.objectProperty(propertyNameIdentifier, innerValueExpression);
+};
+
+const createJsxAttribute = (hashPair: Glimmer.HashPair): Babel.JSXAttribute => {
+  const nameIdentifier = Babel.jsxIdentifier(hashPair.key);
+  const innerValueExpression = resolveExpression(hashPair.value);
+  const valueExpressionContainer = Babel.jsxExpressionContainer(innerValueExpression);
+
+  return Babel.jsxAttribute(nameIdentifier, valueExpressionContainer);
+};
+
+const createPropsSpreadContextAttribute = (paramExpression: Glimmer.Expression | null, customAttributes: Glimmer.HashPair[]): Babel.JSXAttribute => {
+  const customProperties: (Babel.SpreadElement | Babel.ObjectProperty)[] = customAttributes.map(createObjectProperty);
+
+  if (paramExpression !== null) {
+    const innerValueExpression = resolveExpression(paramExpression);
+    const propsSpreadElement = Babel.spreadElement(innerValueExpression);
+    customProperties.unshift(propsSpreadElement);
+  }
+
+  const valueExpression = Babel.objectExpression(customProperties);
+  const valueExpressionContainer = Babel.jsxExpressionContainer(valueExpression);
+  const nameIdentifier = Babel.jsxIdentifier(DEFAULT_PARTIAL_NAMESPACE);
+
+  return Babel.jsxAttribute(nameIdentifier, valueExpressionContainer);
+};
+
+const createPropsContextAttribute = (paramExpression: Glimmer.Expression | null, customAttributes: Glimmer.HashPair[]): Babel.JSXAttribute | null => {
+  if (paramExpression === null && customAttributes.length === 0) {
+    return null;
+  }
+
+  if (customAttributes.length > 0) {
+    return createPropsSpreadContextAttribute(paramExpression, customAttributes);
+  }
+  else if (paramExpression === null) {
+    return null;
+  }
+
+  const innerValueExpression = resolveExpression(paramExpression);
+  const valueExpressionContainer = Babel.jsxExpressionContainer(innerValueExpression);
+  const nameIdentifier = Babel.jsxIdentifier(DEFAULT_PARTIAL_NAMESPACE);
+
+  return Babel.jsxAttribute(nameIdentifier, valueExpressionContainer);
+};
+
+const createPropsSpreadAttribute = (paramExpression: Glimmer.Expression | null): Babel.JSXSpreadAttribute | null => {
+  if (paramExpression === null) {
+    return null;
+  }
+
+  const innerValueExpression = resolveExpression(paramExpression)
+
+  return Babel.jsxSpreadAttribute(innerValueExpression);
+};
+
+const getAttributes = (partialStatement: Glimmer.PartialStatement): (Babel.JSXAttribute | Babel.JSXSpreadAttribute)[] => {
+  const { includeContext } = getProgramOptions();
+  const contextParameter = partialStatement.params.length === 0 ? null : partialStatement.params[0];
+  const propsSpreadAttribute = includeContext ? createPropsContextAttribute(contextParameter, partialStatement.hash.pairs) : createPropsSpreadAttribute(contextParameter);
+  if (propsSpreadAttribute === null) {
+    return [];
+  }
+
+  const customAttributes = includeContext ? [] : partialStatement.hash.pairs.map(createJsxAttribute);
+
+  return [propsSpreadAttribute, ...customAttributes];
+}
+
+/**
+ * Converts a partial statement from Handlebars to a JSXElement
+ */
+ export const convertPartialStatement = (partialStatement: Glimmer.PartialStatement): Babel.JSXElement => {
+  const jsxElementName = (partialStatement.name as Glimmer.PathExpression).original;
+  const tagName = Babel.jsxIdentifier(jsxElementName)
+  const attributes = getAttributes(partialStatement);
+  const isElementSelfClosing = true;
+
+  return Babel.jsxElement(
+    Babel.jsxOpeningElement(tagName, attributes, isElementSelfClosing),
+    Babel.jsxClosingElement(tagName),
+    [],
+    isElementSelfClosing
+  )
+}