kyt-runtime
Advanced tools
This package is meant me to be paired with kyt@1.0.0+ (non-beta).
$ yarn add kyt-runtime
$ yarn add --dev kyt
$ npm i --save-exact kyt-runtime
$ npm i --save-dev --save-exact kyt
kyt-runtime/dynamicdynamic is a port of the same functionality from Next.js - both Next and kyt's implementations are simply Babel/Webpack plugins that wrap React Loadable.
dynamic allows you to code-split modules, while also using them as if they were loaded synchronously. This functionality exists in React.lazy, but React's implementation only works on the client/browser. dynamic works isomorphically - on the client AND during SSR. This was a huge sticking point when the NYT was trying to upgrade from React Router v3, which exposed an isomorphic/asynchronous getComponent prop on <Route>, to RR v4, which did not.
In v3:
const Router = () => (
<StaticRouter>
<Route getComponent={() => import(/* webpackChunkName: "foo" */ './Foo')} />
<Route getComponent={() => import(/* webpackChunkName: "bar" */ './Bar')} />
<Route getComponent={() => import(/* webpackChunkName: "biz" */ './Biz')} />
</StaticRouter>
);
In v4 with dynamic:
import dynamic from 'kyt-runtime/dynamic';
// component will be lazy-loaded on first render
const Foo = dynamic(() => import(/* webpackChunkName: "foo" */ './Foo'));
const Bar = dynamic(() => import(/* webpackChunkName: "bar" */ './Bar'));
const Biz = dynamic(() => import(/* webpackChunkName: "biz" */ './Biz'));
// Foo is not actually imported yet
const Router = () => (
<StaticRouter>
<Route component={Foo} />
<Route component={Bar} />
<Route component={Biz} />
</StaticRouter>
);
In your Babel config:
module.exports = {
plugins: ['kyt-runtime/babel'],
};
Note below, both client and server have a preloadDynamicImports() export.
In src/client/index.js:
import React from 'react';
import { hydrate } from 'react-dom';
import { preloadDynamicImports } from 'kyt-runtime/client';
// Whatever React component is at the root of your application
import Root from './Root';
// change this to whatever ID matches the element in your HTML
const rootNode = document.querySelector('#root');
preloadDynamicImports().then(() => {
hydrate(<Root />, rootNode);
});
// enable Hot Module Replacement (HMR) via Webpack polling
if (process.env.NODE_ENV !== 'production' && module.hot) {
module.hot.accept();
}
If you are using kyt to build your application, you do not need to configure anything for Webpack, it will happen automatically. The Webpack plugins generate manifest files during the client builds that are used by getBundles from kyt-runtime/server to dynamically output the paths to compiled JS bundles.
In src/server/index.js:
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { preloadDynamicImports, DynamicImports, getBundles } from 'kyt-runtime/server';
import App from '../components/App';
import template from './template';
const port = parseInt(KYT.SERVER_PORT, 10);
const app = express();
app.get('*', (req, res) => {
const modules = [];
const html = renderToString(
<DynamicImports report={moduleName => modules.push(moduleName)}>
<App />
</DynamicImports>
);
res.status(200).send(
template({
html,
bundles: getBundles({ modules }),
})
);
});
preloadDynamicImports().then(() => {
app.listen(port, () => {
console.log(`✅ server started on port: ${port}`);
});
});
In src/server/template.js (or whatever you are using to output HTML):
const getDeferScript = src => `<script defer src="${src}"></script>`;
export default ({ html, bundles }) => `
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8" />
</head>
<body>
<div id="root">${html}</div>
${bundles.runtimeBundle ? getDeferScript(bundles.runtimeBundle) : ''}
${bundles.vendorBundle ? getDeferScript(bundles.vendorBundle) : ''}
${bundles.scripts.map(getDeferScript).join('\n')}
${bundles.entryBundle ? getDeferScript(bundles.entryBundle) : ''}
</body>
</html>
`;
FAQs
A shared kyt runtime utility library.
We found that kyt-runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.