@lonelyplanet/dotcom-core/README.md

This package is meant to house some of our more common UI and shared libs across dotcom applications.

# 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
```tsx
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.

```tsx
// 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...

```html
<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.

```html
<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...

```html
<script async src="http://localhost:8080/assets/core.js" />
<link rel="stylesheet" href="http://localhost:8080/assets/core.css" />
```