drupal-attribute

This is a fork of drupal-attribute by Eric MORAND, maintained by CivicTheme. All credit for the original implementation belongs to the upstream authors.

This is not drupal-attribute. This is the project behind drupal-attribute.

Using with twig.js

createAttribute() is the Twig-facing entry point, equivalent to Drupal's create_attribute(). Register it with twig.js:

import Twig from 'twig';
import { createAttribute } from '@civictheme/drupal-attribute';

Twig.extendFunction('create_attribute', createAttribute);

twig.js stamps every object literal compiled from a template with an own, enumerable _keys array recording the authored key order. A collection from this package never renders it, whether you build it with createAttribute(), the constructor, or setAttribute() — so no consumer has to strip it.

What createAttribute() adds is ordering. The create_attribute shipped by drupal-twig-extensions walks the mapping with Object.keys(), which returns the remaining keys in the wrong order — integer-like keys hoist to the front, and twig.js's expression stack assigns the rest out of order:

<button{{ create_attribute({'data-slider-previous': '', 'class': 'btn'}) }}></button>

<!-- drupal-twig-extensions -->
<button class="btn" data-slider-previous=""></button>

<!-- createAttribute -->
<button data-slider-previous="" class="btn"></button>

createAttribute() reads _keys for its ordering, so output matches what Drupal's PHP Attribute produces for the same template. Objects that carry no _keys — anything reaching the function from the render context rather than from a template literal — keep their own enumeration order.

Upstream tracks the same defect as drupal-twig-extensions#1. Note that addDrupalExtensions(Twig) runs on every compiled Twig module import and re-registers its own implementation, so depending on module evaluation order you may need to register through a wrapper rather than once at startup:

const extendFunction = Twig.extendFunction.bind(Twig);

Twig.extendFunction = (name, definition) =>
  extendFunction(name, name === 'create_attribute' ? createAttribute : definition);

Twig.extendFunction('create_attribute', createAttribute);

Prerequisites

• Node.js 20 and above
• Rollup installed globally

It is also recommended to have the following tools installed globally to ease the writing of tests and the tracking of the code coverage:

• odz
• tsx

Installation

The project can be installed by running the following command:

npm install

Usage

Build the test suite

npm run build:test

This command outputs the test suite to the directory src/test/target.

Execute the test suite

The test suite can be executed by running the following command:

node src/test/target/index.mjs

Or, for convenience:

npm t

Build the main artifact

The main artifact can be built by running the following command:

npm run build:main

This command outputs the main artifact to the directory src/main/target, under version SNAPSHOT.

The version can be provided by populating the VERSION environment variable accordingly:

VERSION=1.2.3 npm run build:main

Writing and executing tests

Assuming one want to execute the test located in src/test/foo/bar.ts, one would run:

tsx src/test/foo/bar.ts

It is even possible - and recommended - to track the coverage while writing tests:

odz tsx src/test/foo/bar.ts

Of course, it is also perfectly possible to pipe the result of the test to your favorite tap formatter:

src/test/foo$ tsx bar.ts | tap-nyan
 9   -_-_-_-_-_,------,
 0   -_-_-_-_-_|   /\_/\ 
 0   -_-_-_-_-^|__( ^ .^) 
     -_-_-_-_-  ""  "" 
  Pass!

Contributing

• Fork this repository
• Code
• Implement tests using tape
• Issue a pull request keeping in mind that all pull requests must reference an issue in the issue queue

License

Apache-2.0 © Eric MORAND

Files from the original project have been modified by CivicTheme contributors since 2025. See the commit history for the full list of changes.