@lonelyplanet/dotcom-core

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="{&quot;foo&quot;:&quot;bar&quot;}"
>
  <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" />