Dotcom Core
This package is meant to house some of our more common UI and shared libs across dotcom applications.
Install
npm i
Build
npm run build
Building this application generates 3 things, a dist
folder with commonjs modules, a dist-es
folder with ES Next modules, and lib
which contains webpack bundles for including core JS and CSS assets in other applications.
You can use dotcom-core in multiple ways.
Regular imports
import { Toast } from "@lonelyplanet/dotcom-core";
export () => <Toast />;
Global Components
There are 2 parts to using global components.
Server Side Rendering
Rendering components on the server side in an external application is simple.
// app/layout.tsx
import { ssr } from "@lonelyplanet/dotcom-core/dist/classes/runtime";
{ssr({ component: "globalautocomplete", props: { foo: "bar" } })}
There is a registry of components to choose from in src/registry
.
What the ssr
method does is render your component with renderToString
, and then calls renderToStaticMarkup
to generate something like...
<div
data-lpui-component="globalautocomplete"
data-lpui-component-props="{"foo":"bar"}"
>
<div data-reactroot=""><!-- your component --></div>
</div>
Client Side
In order to mount the components on the client side, you can simply include the latest version of dotcom-core from s3.
<script async src="https://assets.staticlp.com/dotcom-core/1.0.0/core.min.js" />
<link rel="stylesheet" href="https://assets.staticlp.com/dotcom-core/1.0.0/core.css" />
We will also be regularly updating a https://assets.staticlp.com/dotcom-core/version.json
file on s3 so that a middleware can determine the latest version of the header and footer, and automatically inject the latest scripts.
Local Development
npm run dev
This will run webpack
with hot mode enabled on localhost:8080
by default. You can then add the assets to dotcom-web
or any other application you're wanting to test simply with...
<script async src="http://localhost:8080/assets/core.js" />
<link rel="stylesheet" href="http://localhost:8080/assets/core.css" />