Update `JsDelivrEsmResolver::IMPORT_REGEX` to support dynamic imports #59858

natepage · 2025-02-26T00:28:27Z

Q	A
Branch?	6.4
Bug fix?	yes
New feature?	no
Deprecations?	no
Issues	Fix #53145
License	MIT

This fix allows the JsDelivrEsmResolver to resolve dependencies from dynamic imports.

carsonbot · 2025-02-26T00:28:32Z

Hey!

Thanks for your PR. You are targeting branch "7.3" but it seems your PR description refers to branch "6.4".
Could you update the PR description or change target branch? This helps core maintainers a lot.

Cheers!

Carsonbot

smnandre · 2025-02-26T11:25:26Z

Hi @natepage, thank you for taking the time to work on this!

I'm gonna try it this afternoon on a real project to check if this change

is "enough" to support dynamic alias on the whole asset "pipeline"
has any side effect on importmap
is compatible with importmap polyfill

PS: I'm not sure this should be considered a bug fix to be honest.

stof · 2025-02-26T12:14:42Z

src/Symfony/Component/AssetMapper/ImportMap/Resolver/JsDelivrEsmResolver.php

@@ -28,7 +28,7 @@ final class JsDelivrEsmResolver implements PackageResolverInterface
    public const URL_PATTERN_DIST = self::URL_PATTERN_DIST_CSS.'/+esm';
    public const URL_PATTERN_ENTRYPOINT = 'https://data.jsdelivr.com/v1/packages/npm/%s@%s/entrypoints';

-    public const IMPORT_REGEX = '#(?:import\s*(?:[\w$]+,)?(?:(?:\{[^}]*\}|[\w$]+|\*\s*as\s+[\w$]+)\s*\bfrom\s*)?|export\s*(?:\{[^}]*\}|\*)\s*from\s*)("/npm/((?:@[^/]+/)?[^@]+?)(?:@([^/]+))?((?:/[^/]+)*?)/\+esm")#';
+    public const IMPORT_REGEX = '#(?:import\s*(?:[\w$]+,)?(?:(?:\{[^}]*\}|[\w$]+|\*\s*as\s+[\w$]+)\s*\bfrom\s*)?|export\s*(?:\{[^}]*\}|\*)\s*from\s*|await\simport\()("/npm/((?:@[^/]+/)?[^@]+?)(?:@([^/]+))?((?:/[^/]+)*?)/\+esm")(?:\)*)#';


what if some code stores the promise of the dynamic import instead of awaiting it immediately ?

You're right.. PR / doc should state only this direct syntax works.

Still, this will allow AM to handle multiple libraries like Mermaid so i'm not sure we need to handle every case.

stof · 2025-02-26T12:17:20Z

Is this adding the dynamically imported module in the list of dependencies of that module in the AssetMapper representation ? this would be wrong as it would break any lazy-loading done through dynamic imports.

smnandre · 2025-02-26T14:27:58Z

I tested with mermaid.

115 new entries in importmap.php

 115 new items (mermaid, dayjs, khroma, dompurify, @iconify/utils, @braintree/sanitize-url, d3,                    
      lodash-es/memoize.js, lodash-es/merge.js, marked, ts-dedent, roughjs, stylis, lodash-es/isEmpty.js, katex,        
      mermaid/dist/chunks/mermaid.core/dagre-4EVJKHTY.mjs, mermaid/dist/chunks/mermaid.core/c4Diagram-6F5ED5ID.mjs,     
      mermaid/dist/chunks/mermaid.core/flowDiagram-7ASYPVHJ.mjs,                                                        
      mermaid/dist/chunks/mermaid.core/erDiagram-6RL3IURR.mjs,                                                          
      mermaid/dist/chunks/mermaid.core/gitGraphDiagram-NRZ2UAAF.mjs,                                                    
      mermaid/dist/chunks/mermaid.core/ganttDiagram-NTVNEXSI.mjs,                                                       
      mermaid/dist/chunks/mermaid.core/infoDiagram-A4XQUW5V.mjs,                                                        
      mermaid/dist/chunks/mermaid.core/pieDiagram-YF2LJOPJ.mjs,                                                         
      mermaid/dist/chunks/mermaid.core/quadrantDiagram-OS5C2QUG.mjs,                                                    
      mermaid/dist/chunks/mermaid.core/xychartDiagram-6QU3TZC5.mjs,                                                     
      mermaid/dist/chunks/mermaid.core/requirementDiagram-MIRIMTAZ.mjs,                                                 
      mermaid/dist/chunks/mermaid.core/sequenceDiagram-G6AWOVSC.mjs,                                                    
      mermaid/dist/chunks/mermaid.core/classDiagram-LNE6IOMH.mjs,                                                       
      mermaid/dist/chunks/mermaid.core/classDiagram-v2-MQ7JQ4JX.mjs,                                                    
      mermaid/dist/chunks/mermaid.core/stateDiagram-MAYHULR4.mjs,                                                       
      mermaid/dist/chunks/mermaid.core/stateDiagram-v2-4JROLMXI.mjs,                                                    
      mermaid/dist/chunks/mermaid.core/journeyDiagram-G5WM74LC.mjs,                                                     
      mermaid/dist/chunks/mermaid.core/timeline-definition-U7ZMHBDA.mjs,                                                
      mermaid/dist/chunks/mermaid.core/mindmap-definition-GWI6TPTV.mjs,                                                 
      mermaid/dist/chunks/mermaid.core/kanban-definition-QRCXZQQD.mjs,                                                  
      mermaid/dist/chunks/mermaid.core/sankeyDiagram-Y46BX6SQ.mjs,                                                      
      mermaid/dist/chunks/mermaid.core/diagram-QW4FP2JN.mjs, mermaid/dist/chunks/mermaid.core/blockDiagram-ZHA2E4KO.mjs,
      mermaid/dist/chunks/mermaid.core/architectureDiagram-UYN6MBPD.mjs, debug, d3-array, d3-axis, d3-brush, d3-chord,  
      d3-color, d3-contour, d3-delaunay, d3-dispatch, d3-drag, d3-dsv, d3-ease, d3-fetch, d3-force, d3-format, d3-geo,  
      d3-hierarchy, d3-interpolate, d3-path, d3-polygon, d3-quadtree, d3-random, d3-scale, d3-scale-chromatic,          
      d3-selection, d3-shape, d3-time, d3-time-format, d3-timer, d3-transition, d3-zoom, dagre-d3-es/src/dagre/index.js,
      dagre-d3-es/src/graphlib/json.js, dagre-d3-es/src/graphlib/index.js, uuid, @mermaid-js/parser,                    
      dayjs/plugin/isoWeek.js, dayjs/plugin/customParseFormat.js, dayjs/plugin/advancedFormat.js, cytoscape,            
      cytoscape-cose-bilkent, d3-sankey, lodash-es/clone.js, cytoscape-fcose, ms, internmap, delaunator, lodash-es,     
      langium, @mermaid-js/parser/dist/chunks/mermaid-parser.core/info-46DW6VJ7.mjs,                                    
      @mermaid-js/parser/dist/chunks/mermaid-parser.core/packet-W2GHVCYJ.mjs,                                           
      @mermaid-js/parser/dist/chunks/mermaid-parser.core/pie-BEWT4RHE.mjs,                                              
      @mermaid-js/parser/dist/chunks/mermaid-parser.core/architecture-I3QFYML2.mjs,                                     
      @mermaid-js/parser/dist/chunks/mermaid-parser.core/gitGraph-YCYPL57B.mjs, cose-base, robust-predicates,           
      @chevrotain/regexp-to-ast, chevrotain, chevrotain-allstar, vscode-languageserver-types,                           
      vscode-jsonrpc/lib/common/cancellation.js, vscode-languageserver-textdocument, vscode-uri,                        
      vscode-jsonrpc/lib/common/events.js, layout-base, @chevrotain/utils, @chevrotain/gast, @chevrotain/cst-dts-gen,   
      lodash-es/map.js, lodash-es/filter.js, lodash-es/min.js, lodash-es/flatMap.js, lodash-es/uniqBy.js,               
      lodash-es/flatten.js, lodash-es/forEach.js, lodash-es/reduce.js) added to the importmap.php!

It also doubled the generated <script tpye=importmap> size in the HTML

But... it worked perfectly, and i can use mermaid with no problem.

smnandre · 2025-02-26T14:30:04Z

If i add a stimulusFetch: lazy to the Stimulus controller, the lazyness is respected, only the scripts required for the diagram type are loaded.

import { Controller } from '@hotwired/stimulus';
import mermaid from 'mermaid';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    async connect() {
        mermaid.initialize({
            startOnLoad: false,
            securityLevel: 'loose',
            theme: 'forest',
            themeVariables: {
                primaryColor: '#ffc107',
            }
        });

        await mermaid.run({
            querySelector: '.mermaid',
        });
    }
}

(code taken from the original issue #53145 - added the lazy part )

natepage · 2025-03-06T21:48:19Z

Hi @smnandre and @stof, I hope you're doing well,

Thank you for taking the time to look at this and experiment with it!

What are we thinking about this change?
Would you need anything from me at this stage?

I'm just trying to organise my coming weeks 😄

smnandre · 2025-03-08T02:08:22Z

Looks fine to me!

fabpot · 2025-03-24T08:18:25Z

Thank you @natepage.

AYABULELA77

Good

AYABULELA77

[ ]

Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports

a7ccca8

carsonbot added Status: Needs Review Bug labels Feb 26, 2025

carsonbot added this to the 7.3 milestone Feb 26, 2025

natepage changed the base branch from 7.3 to 6.4 February 26, 2025 00:28

natepage changed the title ~~Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports~~ [AssetMapper] Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports Feb 26, 2025

OskarStark changed the title ~~[AssetMapper] Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports~~ [AssetMapper] Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports Feb 26, 2025

stof reviewed Feb 26, 2025

View reviewed changes

nicolas-grekas approved these changes Mar 23, 2025

View reviewed changes

carsonbot added Status: Reviewed and removed Status: Needs Review labels Mar 23, 2025

carsonbot changed the title ~~[AssetMapper] Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports~~ Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports Mar 23, 2025

fabpot approved these changes Mar 24, 2025

View reviewed changes

fabpot modified the milestones: 7.3, 6.4 Mar 24, 2025

fabpot merged commit 3df7170 into symfony:6.4 Mar 24, 2025
8 of 11 checks passed

This was referenced Mar 28, 2025

Release v6.4.20 #60074

Merged

Release v7.2.5 #60075

Merged

AYABULELA77 reviewed Apr 3, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Update `JsDelivrEsmResolver::IMPORT_REGEX` to support dynamic imports #59858

Update `JsDelivrEsmResolver::IMPORT_REGEX` to support dynamic imports #59858

Uh oh!

natepage commented Feb 26, 2025

Uh oh!

carsonbot commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025

Uh oh!

stof Feb 26, 2025

Uh oh!

smnandre Feb 26, 2025

Uh oh!

stof commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025 •

edited

Loading

Uh oh!

natepage commented Mar 6, 2025

Uh oh!

smnandre commented Mar 8, 2025

Uh oh!

fabpot commented Mar 24, 2025

Uh oh!

Uh oh!

AYABULELA77 left a comment

Uh oh!

AYABULELA77 left a comment

Uh oh!

Uh oh!

Uh oh!

Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports #59858

Update JsDelivrEsmResolver::IMPORT_REGEX to support dynamic imports #59858

Uh oh!

Conversation

natepage commented Feb 26, 2025

Uh oh!

carsonbot commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025

Uh oh!

stof Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

smnandre Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

stof commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025

Uh oh!

smnandre commented Feb 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

natepage commented Mar 6, 2025

Uh oh!

smnandre commented Mar 8, 2025

Uh oh!

fabpot commented Mar 24, 2025

Uh oh!

Uh oh!

AYABULELA77 left a comment

Choose a reason for hiding this comment

Uh oh!

AYABULELA77 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Update `JsDelivrEsmResolver::IMPORT_REGEX` to support dynamic imports #59858

Update `JsDelivrEsmResolver::IMPORT_REGEX` to support dynamic imports #59858

smnandre commented Feb 26, 2025 •

edited

Loading