Nitay Neeman nitayneeman

Web & Art Enthusiast

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.html

Created March 6, 2021 20:22

	<body>
	<a href="#module1">Module 1</a>
	<a href="#module2">Module 2</a>
	<script>
	window.addEventListener('hashchange', async () => {
	const route = window.location.hash.substr(1);
	const { myFunction } = await import(`./${route}.mjs`);
	myFunction();
	});
	</script>

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:21

	window.addEventListener('hashchange', async () => {
	// Extracts the new route
	const route = window.location.hash.substr(1);

	// Loads the module based on the route
	const { myFunction } = await import(`./${route}.mjs`);
	myFunction();
	});

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:19

	if (isFeatureEnabled) {
	import('./module.mjs').then((module) => {
	module.myFunction();
	});
	}

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:19

	button.addEventListener('click', async () => {
	const { myFunction } = await import('./module.mjs');
	myFunction();
	});

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:16

	button.addEventListener('click', () =>
	import('./module.mjs').then((module) => {
	module.myFunction();
	})
	);

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:15

	// Static imports
	// import { ... } from '...';

	// ...

	import('./module.mjs').then((module) => {
	// The exports are accessible through the module object
	module.myFunction();
	});

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:13

export const myFunction = () => console.log('This is an exported function!');

nitayneeman / introducing-dynamic-imports-in-ecmascript-2020.js

Created March 6, 2021 20:13

	import { myFunction } from './module.mjs';
	myFunction();

nitayneeman / MyComponent.server.js

Created January 10, 2021 20:47

	import FirstComponent from './FirstComponent.client.js';
	import SecondComponent from './SecondComponent.client.js';

	function MyServerComponent(props) {
	const shouldDisplaySecondComponent = ...; // Some logic

	return shouldDisplaySecondComponent ? <SecondComponent/> : <FirstComponent/>;
	}

nitayneeman / MyComponent.client.js

Created January 10, 2021 20:46

	const FirstComponent = React.lazy(() => import('./FirstComponent.client.js'));
	const SecondComponent = React.lazy(() => import('./SecondComponent.client.js'));

	function MyClientComponent(props) {
	const shouldDisplaySecondComponent = ...; // Some logic

	return shouldDisplaySecondComponent ? <SecondComponent/> : <FirstComponent/>;
	}