Created
April 11, 2025 17:05
-
-
Save NickDeckerDevs/8577f885a9b457a5602887b7641787b9 to your computer and use it in GitHub Desktop.
Code splitting in HubSpot to mimic es6 imports. Video to see demonstration: https://share.cleanshot.com/B5q1CYDk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| this is a macro that will need to do some heavy lifting to continue this | |
| proof of concept into more complex code | |
| --> | |
| {%- macro importjs(module_name) -%} | |
| {{- widget_data.importjs[module_name] -}} | |
| {%- endmacro -%} | |
| <!-- | |
| This is a sample output of widget_data.importjs | |
| { | |
| "definition_id": null, | |
| "export_to_template_context": true, | |
| "field_types": { | |
| "helloworld": "richtext" | |
| }, | |
| "helloworld": "function helloWorld() { console.log('hello world!') }", | |
| "label": "importjs", | |
| "module_id": 188728509957, | |
| "parent_widget_container": null, | |
| "path": "/totara-prm-theme/modules/global/importjs", | |
| "smart_objects": null, | |
| "smart_type": "NOT_SMART", | |
| "type": "module", | |
| "wrap_field_tag": "div" | |
| } | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| the importjs global module is blank. You will have no code in this module, it will only be the | |
| module fields, text, rich text, maybe we have a repeater? I'm not sure best way to make this work at this | |
| point, but what we do is create the field, in this example it was a rich text called | |
| helloworld | |
| with the content | |
| function helloWord() { console.log('hello world') } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- module html --> | |
| <!-- | |
| This is the HTML from the module, we will import the code splitting macro and then | |
| call the macro | |
| We also print the full json of the global module data | |
| --> | |
| {% from "./macros/code-split.html" import importjs %} | |
| <h1>Proof of Concept</h1> | |
| <pre>{{ widget_data.importjs|tojson }}</pre> | |
| {% require_js %} | |
| <script> | |
| console.log('import js is below') | |
| {{ importjs('helloworld') }} | |
| helloWorld() | |
| console.log('that hello world function was imported if you see the console log above') | |
| </script> | |
| {% end_require_js %} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| templateType: page | |
| label: Page template | |
| isAvailableForNewContent: true | |
| --> | |
| <!doctype html> | |
| <html lang="{{ html_lang }}" {{ html_lang_dir }}> | |
| <head> | |
| <meta charset="utf-8"> | |
| {% if page_meta.html_title %} | |
| <title>{{ page_meta.html_title }}</title> | |
| {% endif %} | |
| {% if branding_favicon %} | |
| <link rel="shortcut icon" href="{{ branding_favicon }}" /> | |
| {% endif %} | |
| <meta name="description" content="{{ page_meta.meta_description }}"> | |
| {{ standard_header_includes }} | |
| </head> | |
| <body> | |
| {% block header %}{% endblock header %} | |
| <main> | |
| {% block body %} | |
| {# this is where the content apperas from the templates that extend this default layout #} | |
| {% endblock body %} | |
| </main> | |
| {% block footer %}{% endblock footer %} | |
| {% module | |
| "importjs" | |
| path="/totara-prm-theme/modules/global/importjs", | |
| label="importjs" | |
| export_to_template_context=True | |
| %} | |
| {{ standard_footer_includes }} | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment