ScriptedAlchemy
/ getOrLoadRemote.js
Last active
May 31, 2025 08:42
The Right Way to Load Dynamic Remotes
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
| import { injectScript } from '@module-federation/utilities'; | |
| // example of dynamic remote import on server and client | |
| const isServer = typeof window === 'undefined'; | |
| //could also use | |
| // getModule({ | |
| // remoteContainer: { | |
| // global: 'app2', | |
| // url: 'http://localhost:3002/remoteEntry.js', | |
| // }, | |
| // modulePath: './sample' |
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
| function recursiveMap(children, fn) { | |
| return React.Children.map(children, (child) => { | |
| if (!React.isValidElement(child)) { | |
| return child; | |
| } | |
| if (child.props.children) { | |
| child = React.cloneElement(child, { | |
| children: recursiveMap(child.props.children, fn), | |
| }); |
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
| const withLocalCSS = (nextConfig = {}) => Object.assign({}, nextConfig, { | |
| webpack: (config, options) => { | |
| const nextCssLoaders = config.module.rules.find(rule => typeof rule.oneOf === 'object'); | |
| // .module.css | |
| if (nextCssLoaders) { | |
| nextCssLoaders.oneOf.forEach( | |
| (rule) => { |
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
| // Modified version of @lingui/loader. | |
| // Current version does not read message catalogs correctly. | |
| // https://github.com/lingui/js-lingui/blob/388464825440b7df3f20a549e425399f8a64c0b7/packages/loader/src/index.js | |
| const path = require("path"); | |
| const { getConfig } = require("@lingui/conf"); | |
| const { createCompiledCatalog, configureCatalog } = require("@lingui/cli/api"); | |
| const loaderUtils = require("loader-utils"); | |
| // Check if JavascriptParser and JavascriptGenerator exists -> Webpack 4 |
ScriptedAlchemy
/ MutateRuntimePlugin.js
Last active
August 4, 2023 01:01
Remote PublicPath Modification
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
| const PLUGIN_NAME = "MutateRuntimePlugin"; | |
| class MutateRuntimePlugin { | |
| /** | |
| * | |
| * @param {FederationDashboardPluginOptions} options | |
| */ | |
| constructor(options) {} | |
| /** |
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
| { | |
| "publicPath": "http://localhost:3001/", | |
| "federationRemoteEntry": { | |
| "rendered": true, | |
| "initial": true, | |
| "entry": true, | |
| "recorded": false, | |
| "size": 7355, | |
| "sizes": { | |
| "javascript": 42, |
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
| var chunkMap = {}/******/ (function(modules) { // webpackBootstrap | |
| /******/ // install a JSONP callback for chunk loading | |
| /******/ function webpackJsonpCallback(data) { | |
| /******/ var chunkIds = data[0]; | |
| /******/ var moreModules = data[1]; | |
| /******/ var executeModules = data[2]; | |
| /******/ | |
| /******/ // add "moreModules" to the modules object, | |
| /******/ // then flag all "chunkIds" as loaded and fire callback | |
| /******/ var moduleId, chunkId, i = 0, resolves = []; |
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
| /******/ (function(modules) { // webpackBootstrap | |
| /******/ // install a JSONP callback for chunk loading | |
| /******/ function webpackJsonpCallback(data) { | |
| /******/ var chunkIds = data[0]; | |
| /******/ var moreModules = data[1]; | |
| /******/ var executeModules = data[2]; | |
| /******/ | |
| /******/ // add "moreModules" to the modules object, | |
| /******/ // then flag all "chunkIds" as loaded and fire callback | |
| /******/ var moduleId, chunkId, i = 0, resolves = []; |
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
| const path = require('path'); | |
| const VirtualStats = require('./virtual-stats'); | |
| class SyntheticPlugin { | |
| constructor(options) { | |
| this.options = options; | |
| } | |
| apply(compiler) { | |
| const moduleName = this.options.moduleName; |
ScriptedAlchemy
/ Index.js
Last active
November 28, 2019 04:22
Modifying tree-shaking module by module
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
| if (moduleSource?.indexOf('externalize') > -1 || false) { | |
| module.buildMeta = mergeDeep(module.buildMeta, { isExternalized: true }); | |
| // add exports back to usedExports, prevents tree shaking on module | |
| Object.assign(module, { usedExports: module?.buildMeta?.providedExports || true }); | |
| try { | |
| // look at refactoring this to use buildMeta not mutate id | |
| module.id = moduleSource.match(/\/\*\s*externalize\s*:\s*(\S+)\s*\*\//)[1]; | |
| externalModules[module.id] = {}; |