This is quick start guide will help you set up glory in your project correctly.

You can find detail documentation for each add-on in this directory.

First of all, install glory with your package manager

yarn add glory

npm install glory

Then you will need to customize the renderer. Create a new file for customization.

//nameItTheWayYouWant.js
import { create } from 'glory'

const glory = create({
	// pass parameter here to config the default renderer
})

export default glory

You can find parameters for configuring default renderer here.

By default, glory doesn't come with a styling interface in order to reduce bundle size. You will need to upgrade it with the following add-ons.

You may use more than one of the following add-ons.

• virtual()

• jsx()

These add-ons are included in the main package, and can be access like the example below.

//nameItTheWayYouWant.js
import { create } from 'glory'
import virtual from 'glory/virtual'

const glory = create({})

virtual(glory)

export default glory

By default, auto-prefixing is not support by the default bundler for a more modular design. To enable it, upgrade renderer with prefixer()

//nameItTheWayYouWant.js
import { create } from 'glory'
import virtual from 'glory/virtual'
import prefixer from 'glory/prefixer'

const glory = create({})

virtual(glory)
prefixer(glory)

export default glory

It is common to do SSR or SSG nowadays for improving website rendering performance. glory supports that and would prevent rendering duplicated stylings.

To get the rendered styling in server side, access renderer.raw.

//Import an initialized instance
import glory from 'nameItTheWayYouWant.js'

//render your app to string
//append the style whereever you want.
html += `<style>${glory.raw}</style>`

To avoid re-rendering duplicated styling, you will need to use hydration() in your renderer instance, and provide the renderer style tag as renderer.sh.

//nameItTheWayYouWant.js
import { create } from 'glory'
//...
import hydration from 'glory/hydration'

const glory = create({})
//...
hydration(glory)

const glory = create({
	sh:
		typeof document === 'object' ? document.getElementById('glory') : null
})

html += `<style id="glory">${glory.raw}</style>`

By default some error message is provided to guide your development. To remove those error message and trim your production build, use a define plugin to set process.env.NODE_ENV to production to enable dead code elimination.

@rollup/plugin-replace