@emulsify/core 4.0.2 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -115,7 +115,9 @@ export const decorators = [
115
115
  * @param {object} context Story context including args.
116
116
  * @returns {*} Rendered story.
117
117
  */
118
- (Story, { args }) => {
118
+ (Story, context) => {
119
+ const { args } = context;
120
+
119
121
  useEffect(() => {
120
122
  void attachStorybookBehaviors({
121
123
  adapter: platformAdapter,
@@ -123,7 +125,7 @@ export const decorators = [
123
125
  });
124
126
  }, [args]);
125
127
 
126
- return renderHtmlStoryResult(Story({ args }), {
128
+ return renderHtmlStoryResult(Story(context), {
127
129
  platformAdapter,
128
130
  });
129
131
  },
@@ -5,6 +5,7 @@
5
5
  import {
6
6
  attachStorybookBehaviors,
7
7
  genericStorybookAdapter,
8
+ noneStorybookAdapter,
8
9
  normalizeStorybookPlatformAdapter,
9
10
  } from '../src/storybook/platform-behaviors.js';
10
11
  import { setupTwig } from '../src/storybook/twig/setup.js';
@@ -93,6 +94,7 @@ export {
93
94
  attachStorybookBehaviors,
94
95
  fetchCSSFiles,
95
96
  genericStorybookAdapter,
97
+ noneStorybookAdapter,
96
98
  normalizeStorybookPlatformAdapter,
97
99
  setupTwig,
98
100
  };
package/README.md CHANGED
@@ -34,7 +34,7 @@ See [Version Evolution](docs/version-evolution.md) for more release history.
34
34
 
35
35
  Twig and React are equally valid ways to build component libraries with Emulsify Core. The right authoring model depends on the consuming project:
36
36
 
37
- - Use Twig for CMS themes and server-rendered template systems. Drupal has a dedicated adapter today; Craft CMS and WordPress + Timber can use the generic adapter unless a project adds platform-specific behavior.
37
+ - Use Twig for CMS themes and server-rendered template systems. Drupal has a dedicated adapter today; Craft CMS and WordPress + Timber can use the `none` adapter unless a project adds platform-specific behavior.
38
38
  - Use React for standalone UI libraries, application components, or projects that already use React.
39
39
  - Use mixed Twig and React when a design system needs to document both CMS-rendered and JavaScript-rendered components in the same Storybook instance.
40
40
 
@@ -53,7 +53,7 @@ Every project should provide a `project.emulsify.json` file at the project root:
53
53
  ```json
54
54
  {
55
55
  "project": {
56
- "platform": "generic",
56
+ "platform": "none",
57
57
  "name": "example",
58
58
  "machineName": "example"
59
59
  }
@@ -77,7 +77,7 @@ The documentation is split by task:
77
77
  | [Component Authoring](docs/component-authoring.md) | Choosing Twig, React, or mixed Storybook authoring and comparing component examples. |
78
78
  | [Storybook](docs/storybook.md) | Rendering Twig stories, using `renderTwig()`, understanding Twig runtime helpers, and mixing Twig with React stories. |
79
79
  | [Project Structure And Output](docs/project-structure.md) | Configuring `src/components`, root `./components`, `variant.structureImplementations`, and expected output paths. |
80
- | [Platform Adapters](docs/platform-adapters.md) | Understanding `generic`, `drupal`, platform resolution order, and Drupal SDC behavior. |
80
+ | [Platform Adapters](docs/platform-adapters.md) | Understanding `none`, `drupal`, platform resolution order, and Drupal SDC behavior. |
81
81
  | [Extension Points](docs/extension-points.md) | Adding Vite plugins, Tailwind CSS, Storybook preview overrides, and other framework tooling. |
82
82
  | [Performance](docs/performance.md) | Understanding sourcemaps, eager Twig imports, Tailwind scanning, copied files, and fixture validation. |
83
83
  | [Native Twig Extensions](docs/native-twig-extensions.md) | Using `bem()`, `add_attributes()`, and `switch/case/default/endswitch` in Twig.js. |
@@ -86,24 +86,24 @@ The documentation is split by task:
86
86
 
87
87
  ## Known Limitations
88
88
 
89
- - Implemented platform adapters are currently `generic` and `drupal`. WordPress + Timber and Craft CMS are supported as Twig-oriented use cases through the generic adapter today; dedicated adapters are future opportunities. See [Platform Adapters](docs/platform-adapters.md).
89
+ - Implemented platform adapters are currently `none` and `drupal`. WordPress + Timber and Craft CMS are supported as Twig-oriented use cases through the `none` adapter today. Dedicated adapters are future opportunities. See [Platform Adapters](docs/platform-adapters.md).
90
90
  - Storybook's Twig resolver eagerly imports Twig modules and raw Twig source. This is reliable for `include()` and `source()`, but large Twig libraries should keep Storybook source roots intentional. See [Performance](docs/performance.md).
91
91
  - Production sourcemaps are enabled by default unless a project overrides Vite config through `config/emulsify-core/vite/plugins.*`. See [Performance](docs/performance.md).
92
92
  - Project extensions use the public `config/emulsify-core` directory: `config/emulsify-core/vite/plugins.*` for Vite, `config/emulsify-core/storybook/...` for Storybook, and `config/emulsify-core/a11y.config.js` for a11y. See [Extension Points](docs/extension-points.md).
93
93
  - Webpack-specific customizations must be migrated manually to Vite plugins or `extendConfig()`. See [Migration](docs/migration-4x.md).
94
- - Drupal SDC mirroring only applies when the Drupal adapter and SDC settings are enabled. Generic projects should expect output to remain in `dist/`. See [Platform Adapters](docs/platform-adapters.md).
94
+ - Drupal SDC mirroring only applies when the Drupal adapter and SDC settings are enabled. `none` projects should expect output to remain in `dist/`. See [Platform Adapters](docs/platform-adapters.md).
95
95
 
96
96
  ## Supported Project Shapes
97
97
 
98
98
  Release-readiness coverage validates:
99
99
 
100
100
  - Drupal SDC projects using `src/components`.
101
- - Generic Twig projects using `src/components`.
101
+ - `none` platform Twig projects using `src/components`.
102
102
  - Root `./components` projects.
103
103
  - Projects using multiple `variant.structureImplementations`.
104
104
  - Mixed Twig + React Storybook projects.
105
105
 
106
- WordPress + Timber and Craft CMS are Twig-based project use cases that can use the `generic` adapter today. Dedicated adapters for those platforms are future opportunities. The implemented adapters in this package are currently `generic` and `drupal`.
106
+ WordPress + Timber and Craft CMS are Twig-based project use cases that can use the `none` adapter today. Dedicated adapters for those platforms are future opportunities. The implemented adapters in this package are currently `none` and `drupal`.
107
107
 
108
108
  ## Public Imports
109
109
 
@@ -5,7 +5,7 @@
5
5
  * entries, plugins, and the Vite config.
6
6
  *
7
7
  * Highlights:
8
- * - `platform`: from env var or project.emulsify.json (default "generic").
8
+ * - `platform`: from env var or project.emulsify.json (default "none").
9
9
  * - `SDC`: boolean from project.emulsify.json `project.singleDirectoryComponents`.
10
10
  * - `structureOverrides`: true when safe `variant.structureImplementations` exist.
11
11
  * - `structureRoots`: array of directories from `variant.structureImplementations`.
@@ -21,7 +21,7 @@ import { resolveProjectConfig } from './project-config.js';
21
21
  * projectDir: string,
22
22
  * srcDir: string,
23
23
  * srcExists: boolean,
24
- * platform: 'drupal' | 'generic' | string,
24
+ * platform: 'drupal' | 'none' | string,
25
25
  * SDC: boolean,
26
26
  * structureOverrides: boolean,
27
27
  * structureRoots: string[],
@@ -5,8 +5,8 @@
5
5
  * decisions can be used by Node-side Vite config and Storybook browser code.
6
6
  */
7
7
 
8
- const genericAdapter = {
9
- name: 'generic',
8
+ const noneAdapter = {
9
+ name: 'none',
10
10
  outputStrategy: 'dist',
11
11
  storybook: {
12
12
  loadDrupalBehaviorShim: false,
@@ -36,7 +36,8 @@ const drupalAdapter = {
36
36
  };
37
37
 
38
38
  const adapters = {
39
- generic: genericAdapter,
39
+ none: noneAdapter,
40
+ generic: noneAdapter,
40
41
  drupal: drupalAdapter,
41
42
  };
42
43
 
@@ -50,21 +51,39 @@ function cloneAdapter(adapter) {
50
51
  return JSON.parse(JSON.stringify(adapter));
51
52
  }
52
53
 
54
+ /**
55
+ * Normalize configured platform names to canonical identifiers.
56
+ *
57
+ * `generic` is retained as a legacy alias for existing projects, but new
58
+ * configuration should use `none` for projects without platform-specific
59
+ * behavior.
60
+ *
61
+ * @param {*} platform - Candidate platform name.
62
+ * @returns {string} Canonical platform name.
63
+ */
64
+ export function normalizePlatformName(platform = 'none') {
65
+ const key = (platform || '').toString().toLowerCase().trim();
66
+ if (!key || key === 'generic') {
67
+ return 'none';
68
+ }
69
+ return key;
70
+ }
71
+
53
72
  /**
54
73
  * Resolve the platform adapter for a normalized platform name.
55
74
  *
56
- * Unknown platforms intentionally use generic behavior while preserving the
75
+ * Unknown platforms intentionally use `none` behavior while preserving the
57
76
  * resolved `platform` string separately on the environment object.
58
77
  *
59
- * @param {string} [platform='generic'] - Normalized platform name.
78
+ * @param {string} [platform='none'] - Normalized platform name.
60
79
  * @returns {object} Serializable platform adapter.
61
80
  */
62
- export function getPlatformAdapter(platform = 'generic') {
63
- const key = (platform || 'generic').toString().toLowerCase().trim();
81
+ export function getPlatformAdapter(platform = 'none') {
82
+ const key = normalizePlatformName(platform);
64
83
  if (key === 'drupal') {
65
84
  return cloneAdapter(drupalAdapter);
66
85
  }
67
- return cloneAdapter(genericAdapter);
86
+ return cloneAdapter(noneAdapter);
68
87
  }
69
88
 
70
89
  export { adapters };
@@ -8,7 +8,7 @@
8
8
  */
9
9
 
10
10
  import { normalize, resolve, sep } from 'path';
11
- import { getPlatformAdapter } from './platforms.js';
11
+ import { getPlatformAdapter, normalizePlatformName } from './platforms.js';
12
12
  import { resolveProjectStructure } from './project-structure.js';
13
13
  import { safeExists, safeReadJson } from './utils/fs-safe.js';
14
14
 
@@ -53,8 +53,12 @@ function normalizeIdentifier(value) {
53
53
  * @returns {string} Stable cache-key segment.
54
54
  */
55
55
  function projectConfigEnvSignature(env = {}) {
56
+ const platformOverride = normalizeIdentifier(env.EMULSIFY_PLATFORM);
57
+
56
58
  return JSON.stringify({
57
- EMULSIFY_PLATFORM: normalizeIdentifier(env.EMULSIFY_PLATFORM),
59
+ EMULSIFY_PLATFORM: platformOverride
60
+ ? normalizePlatformName(platformOverride)
61
+ : '',
58
62
  });
59
63
  }
60
64
 
@@ -119,11 +123,12 @@ export function resolveProjectConfig(
119
123
  const srcExists = safeExists(srcCandidate);
120
124
  const srcDir = srcExists ? srcCandidate : resolve(root, 'components');
121
125
 
122
- const platform =
126
+ const resolvedPlatform =
123
127
  normalizeIdentifier(env.EMULSIFY_PLATFORM) ||
124
128
  normalizeIdentifier(rawConfig?.project?.platform) ||
125
129
  normalizeIdentifier(rawConfig?.variant?.platform) ||
126
- 'generic';
130
+ 'none';
131
+ const platform = normalizePlatformName(resolvedPlatform);
127
132
  const platformAdapter = getPlatformAdapter(platform);
128
133
 
129
134
  const singleDirectoryComponents = Boolean(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@emulsify/core",
3
- "version": "4.0.2",
3
+ "version": "4.0.4",
4
4
  "description": "Bundled tooling for Storybook development + Vite Build",
5
5
  "keywords": [
6
6
  "component library",
@@ -157,7 +157,7 @@
157
157
  "twatch": "npm run check-node-version && jest --no-coverage --watch --verbose"
158
158
  },
159
159
  "dependencies": {
160
- "@babel/core": "^7.28.4",
160
+ "@babel/core": "^7.29.7",
161
161
  "@babel/eslint-parser": "^7.28.6",
162
162
  "@babel/preset-env": "^7.28.3",
163
163
  "@emulsify/cli": "^1.11.4",
@@ -171,7 +171,7 @@
171
171
  "autoprefixer": "^10.4.21",
172
172
  "axe-core": "^4.11.4",
173
173
  "babel-preset-minify": "^0.5.2",
174
- "concurrently": "^9.2.1",
174
+ "concurrently": "^9.2.3",
175
175
  "eslint": "^9.39.4",
176
176
  "eslint-config-prettier": "^10.1.8",
177
177
  "eslint-plugin-import": "^2.32.0",
@@ -200,7 +200,7 @@
200
200
  "stylelint-selector-bem-pattern": "^5.0.0",
201
201
  "twig": "^3.0.0",
202
202
  "twig-drupal-filters": "^3.2.0",
203
- "vite": "^7.3.3",
203
+ "vite": "^7.3.5",
204
204
  "vite-plugin-sass-glob-import": "^6.0.0",
205
205
  "vite-plugin-static-copy": "^4.1.0",
206
206
  "vite-plugin-svg-sprite": "^0.7.0",
package/scripts/audit.js CHANGED
@@ -5,7 +5,14 @@
5
5
  */
6
6
 
7
7
  import { lstatSync, readdirSync, statSync } from 'node:fs';
8
- import { basename, dirname, relative, resolve, sep } from 'node:path';
8
+ import {
9
+ basename,
10
+ dirname,
11
+ isAbsolute,
12
+ relative,
13
+ resolve,
14
+ sep,
15
+ } from 'node:path';
9
16
  import { globSync } from 'glob';
10
17
  import { resolveProjectConfig } from '../config/vite/project-config.js';
11
18
  import {
@@ -68,6 +75,7 @@ const RECOMMENDED_PACKAGE_OVERRIDES = [
68
75
  ];
69
76
  const GENERATED_PACKAGE_SCRIPT_DOCS =
70
77
  'https://github.com/emulsify-ds/emulsify-core/blob/4.x/docs/migration-4x.md#manual-packagejson-updates';
78
+ const GENERATED_ASSET_ALIASES = new Set(['icons.svg']);
71
79
 
72
80
  /**
73
81
  * Cache source file reads for one top-level audit run.
@@ -329,7 +337,7 @@ function resolveAuditEnvironment(projectDir) {
329
337
  return {
330
338
  env: {
331
339
  projectDir,
332
- platform: 'generic',
340
+ platform: 'none',
333
341
  namespaceRoots: {},
334
342
  projectStructure: {},
335
343
  },
@@ -726,6 +734,74 @@ function candidateKeysToFiles(keys, env) {
726
734
  );
727
735
  }
728
736
 
737
+ /**
738
+ * Resolve an audit asset root using Storybook's root-relative convention.
739
+ *
740
+ * @param {string} projectDir - Absolute project root.
741
+ * @param {string} assetRoot - Configured, absolute, or project-relative root.
742
+ * @returns {string} Absolute filesystem path, or an empty string.
743
+ */
744
+ function resolveAuditAssetRoot(projectDir, assetRoot) {
745
+ if (typeof assetRoot !== 'string' || !assetRoot.trim()) return '';
746
+
747
+ const normalizedProjectDir = resolve(projectDir || process.cwd());
748
+ const normalizedRoot = assetRoot.trim();
749
+
750
+ if (isAbsolute(normalizedRoot)) {
751
+ const absoluteRoot = resolve(normalizedRoot);
752
+
753
+ return safeExists(absoluteRoot)
754
+ ? absoluteRoot
755
+ : resolve(normalizedProjectDir, `.${normalizedRoot}`);
756
+ }
757
+
758
+ return resolve(normalizedProjectDir, normalizedRoot);
759
+ }
760
+
761
+ /**
762
+ * Return filesystem roots that Storybook can use for @assets source() calls.
763
+ *
764
+ * @param {object} env - Normalized environment.
765
+ * @param {object} [options={}] - Asset root options.
766
+ * @param {boolean} [options.includeGenerated=false] - Include generated roots.
767
+ * @returns {string[]} Absolute asset roots.
768
+ */
769
+ function auditAssetRoots(env = {}, { includeGenerated = false } = {}) {
770
+ const projectDir = env.projectDir || process.cwd();
771
+ const configuredRoots = Array.isArray(env?.projectStructure?.assetRoots)
772
+ ? env.projectStructure.assetRoots
773
+ : [];
774
+ const fallbackRoots = ['assets', 'src/assets'];
775
+ const generatedRoots = includeGenerated ? ['dist/assets'] : [];
776
+
777
+ return Array.from(
778
+ new Set(
779
+ [...fallbackRoots, ...configuredRoots, ...generatedRoots]
780
+ .map((root) => resolveAuditAssetRoot(projectDir, root))
781
+ .filter(Boolean),
782
+ ),
783
+ );
784
+ }
785
+
786
+ /**
787
+ * Determine whether an @assets reference resolves through Storybook asset roots.
788
+ *
789
+ * @param {string} reference - Twig @assets reference.
790
+ * @param {object} env - Normalized environment.
791
+ * @returns {boolean} TRUE when a candidate exists.
792
+ */
793
+ function resolvesAssetReference(reference, env) {
794
+ const relAsset = reference.replace(/^@assets\//, '');
795
+ if (!relAsset) return false;
796
+ const includeGenerated = GENERATED_ASSET_ALIASES.has(relAsset);
797
+
798
+ return auditAssetRoots(env, { includeGenerated }).some((root) => {
799
+ const candidate = resolve(root, relAsset);
800
+
801
+ return isSameOrInside(candidate, root) && safeExists(candidate);
802
+ });
803
+ }
804
+
729
805
  /**
730
806
  * Determine whether a Twig include/source reference resolves.
731
807
  *
@@ -738,8 +814,7 @@ export function resolvesTwigReference(reference, filePath, env) {
738
814
  if (!reference || /^https?:\/\//i.test(reference)) return true;
739
815
 
740
816
  if (reference.startsWith('@assets/')) {
741
- const relAsset = reference.replace(/^@assets\//, '');
742
- return safeExists(resolve(env.projectDir, 'assets', relAsset));
817
+ return resolvesAssetReference(reference, env);
743
818
  }
744
819
 
745
820
  const candidates =
@@ -2,7 +2,7 @@
2
2
  * @file Platform-specific Storybook behavior helpers.
3
3
  */
4
4
 
5
- export const genericStorybookAdapter = {
5
+ export const noneStorybookAdapter = {
6
6
  loadDrupalBehaviorShim: false,
7
7
  attachDrupalBehaviors: false,
8
8
  registerDrupalTwigFilters: false,
@@ -10,15 +10,17 @@ export const genericStorybookAdapter = {
10
10
  allowSyncXhrSource: false,
11
11
  };
12
12
 
13
+ export const genericStorybookAdapter = noneStorybookAdapter;
14
+
13
15
  /**
14
16
  * Normalize optional platform adapter flags into the full Storybook shape.
15
17
  *
16
18
  * @param {object} [adapter] - Candidate Storybook adapter flags.
17
- * @returns {object} Storybook adapter flags with generic defaults.
19
+ * @returns {object} Storybook adapter flags with non-platform defaults.
18
20
  */
19
21
  export function normalizeStorybookPlatformAdapter(adapter = {}) {
20
22
  return {
21
- ...genericStorybookAdapter,
23
+ ...noneStorybookAdapter,
22
24
  ...(adapter || {}),
23
25
  };
24
26
  }
@@ -27,7 +29,7 @@ export function normalizeStorybookPlatformAdapter(adapter = {}) {
27
29
  * Attach platform-specific behaviors after a Storybook render.
28
30
  *
29
31
  * Drupal behavior attachment is opt-in through the active platform adapter.
30
- * Generic and unknown platforms return without creating Drupal globals.
32
+ * `none` and unknown platforms return without creating Drupal globals.
31
33
  *
32
34
  * @param {object} [options={}] - Attachment options.
33
35
  * @param {object} [options.adapter] - Active Storybook platform adapter.