updated: Add support for ref expressions

Author: GianlucaGuarini

package-lock.json

@@ -53,7 +53,7 @@
     "@babel/core": "^7.26.9",
     "@babel/preset-env": "^7.26.9",
     "@playwright/test": "^1.50.1",
-    "@riotjs/dom-bindings": "^9.2.5",
+    "@riotjs/dom-bindings": "^9.2.6",
     "@riotjs/prettier-config": "^1.1.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -68,16 +68,16 @@
     "eslint-config-riot": "^4.1.2",
     "eslint-plugin-fp": "^2.3.0",
     "mocha": "^11.1.0",
-    "prettier": "^3.5.1",
+    "prettier": "^3.5.2",
     "pug": "^3.0.3",
     "rollup": "^4.34.8",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "^5.14.0",
-    "sass": "^1.85.0",
+    "sass": "^1.85.1",
     "serve": "^14.2.4",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.10",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   },
   "author": "Gianluca Guarini <[email protected]> (https://gianlucaguarini.com)",
   "license": "MIT",
@@ -88,14 +88,14 @@
   "dependencies": {
     "@babel/parser": "^7.26.9",
     "@riotjs/parser": "^9.0.1",
-    "@riotjs/util": "2.4.0",
+    "@riotjs/util": "2.5.0",
     "css-simple-parser": "^3.0.2",
     "cssesc": "^3.0.0",
     "cumpa": "^2.0.1",
     "curri": "^2.0.3",
     "dom-nodes": "^1.1.3",
     "globals": "^16.0.0",
-    "recast": "^0.23.9",
+    "recast": "^0.23.10",
     "source-map": "^0.7.4"
   }
 }

package.json

@@ -3,9 +3,11 @@ import {
   IS_SPREAD_ATTRIBUTE,
   IS_VOID_NODE,
   PROGRESS_TAG_NODE_NAME,
+  REF_ATTRIBUTE,
   SLOT_ATTRIBUTE,
   SLOT_TAG_NODE_NAME,
   TEMPLATE_TAG_NODE_NAME,
+  VALUE_ATTRIBUTE,
 } from './constants.js'
 import {
   findAttribute,
@@ -179,7 +181,16 @@ export function isSpreadAttribute(node) {
  * @returns {boolean} true only for value attribute nodes
  */
 export function isValueAttribute(node) {
-  return node.name === 'value'
+  return node.name === VALUE_ATTRIBUTE
+}
+
+/**
+ * True if the node is an attribute and its name is "ref"
+ * @param   {RiotParser.Node} node - riot parser node
+ * @returns {boolean} true only for ref attribute nodes
+ */
+export function isRefAttribute(node) {
+  return node.name === REF_ATTRIBUTE
 }
 
 /**

src/generators/template/checks.js

@@ -9,6 +9,7 @@ export const SLOT_BINDING_TYPE = 'SLOT'
 export const EXPRESSION_TYPES = 'expressionTypes'
 export const ATTRIBUTE_EXPRESSION_TYPE = 'ATTRIBUTE'
 export const VALUE_EXPRESSION_TYPE = 'VALUE'
+export const REF_EXPRESSION_TYPE = 'REF'
 export const TEXT_EXPRESSION_TYPE = 'TEXT'
 export const EVENT_EXPRESSION_TYPE = 'EVENT'
 
@@ -43,6 +44,8 @@ export const IF_DIRECTIVE = 'if'
 export const EACH_DIRECTIVE = 'each'
 export const KEY_ATTRIBUTE = 'key'
 export const SLOT_ATTRIBUTE = 'slot'
+export const VALUE_ATTRIBUTE = 'value'
+export const REF_ATTRIBUTE = 'ref'
 export const NAME_ATTRIBUTE = 'name'
 export const IS_DIRECTIVE = 'is'
 

src/generators/template/constants.js

@@ -1,6 +1,7 @@
 import {
   isEventAttribute,
   isProgressNode,
+  isRefAttribute,
   isTextNode,
   isValueAttribute,
 } from '../checks.js'
@@ -10,6 +11,7 @@ import { findDynamicAttributes } from '../find.js'
 import { hasValueAttribute } from 'dom-nodes'
 import textExpression from './text.js'
 import valueExpression from './value.js'
+import refExpression from './ref.js'
 
 export function createExpression(
   sourceNode,
@@ -27,6 +29,8 @@ export function createExpression(
       hasValueAttribute(parentNode.name) &&
       !isProgressNode(parentNode):
       return valueExpression(sourceNode, sourceFile, sourceCode)
+    case isRefAttribute(sourceNode):
+      return refExpression(sourceNode, sourceFile, sourceCode)
     case isEventAttribute(sourceNode):
       return eventExpression(sourceNode, sourceFile, sourceCode)
     default:

src/generators/template/expressions/index.js

@@ -0,0 +1,30 @@
+import {
+  BINDING_EVALUATE_KEY,
+  BINDING_TYPE_KEY,
+  EXPRESSION_TYPES,
+  REF_EXPRESSION_TYPE,
+} from '../constants.js'
+import { builders } from '../../../utils/build-types.js'
+import { createAttributeEvaluationFunction } from '../utils.js'
+import { simplePropertyNode } from '../../../utils/custom-ast-nodes.js'
+
+export default function createRefExpression(
+  sourceNode,
+  sourceFile,
+  sourceCode,
+) {
+  return builders.objectExpression([
+    simplePropertyNode(
+      BINDING_TYPE_KEY,
+      builders.memberExpression(
+        builders.identifier(EXPRESSION_TYPES),
+        builders.identifier(REF_EXPRESSION_TYPE),
+        false,
+      ),
+    ),
+    simplePropertyNode(
+      BINDING_EVALUATE_KEY,
+      createAttributeEvaluationFunction(sourceNode, sourceFile, sourceCode),
+    ),
+  ])
+}

src/generators/template/expressions/ref.js

@@ -672,6 +672,22 @@ describe('Generators - Template', () => {
       )
     })
 
+    it('Simple ref expression', () => {
+      const source = '<div ref={ref}/>'
+      const { template } = parse(source)
+      const input = simpleBinding(template, 'expr0', FAKE_SRC_FILE, source)
+      const output = evaluateOutput(input)
+      const expression = output.expressions[0]
+
+      expect(output[BINDING_SELECTOR_KEY]).to.be.equal('[expr0]')
+
+      expect(expression[BINDING_EVALUATE_KEY]).to.be.a('function')
+      expect(expression[BINDING_TYPE_KEY]).to.be.equal(expressionTypes.REF)
+      expect(expression[BINDING_EVALUATE_KEY]({ ref: 'ref' })).to.be.equal(
+        'ref',
+      )
+    })
+
     it('Simple event expression', () => {
       const source = '<input oninput={foo}/>'
       const { template } = parse(source)