getchange.io-modules

This repository contains modules used by the getchange.io website.

Why?

1. Development is much easier here than in Webflow.
2. Custom JS needs to be linkable from an HTML embed tag in Webflow. Bundling a module and publishing it to NPM allows us to easily link to it from the Webflow embed tag.
3. Some modules are also used in our dashboard or other places. Having one central repository makes it easy to update all of them at once.

Get started

# Start the dev server
npm run dev
# In another terminal, start the build process
npm run build:dropin:watch

Visit http://localhost:8000/dev/change-demo.html

(For another module, visit a different page in dev/).

All the dev html pages should use the "dropin" version of the build.

Build for production

There are two ways to build a module for production: "dropin" and "importable".

Dropin

npm run build:dropin

Dropin modules are built to be included in a Webflow project. They are built to a single file, build-dropin/bundled-*.js, which can be included in a Webflow embed tag like this:

<script type="module" src="https://unpkg.com/@getchange/[email protected]/build-dropin/bundled-change-demo.js"></script>

Importable

npm run build:importable

Importable modules are built to be imported in a TypeScript or JavaScript project. They are built to javascript files and TS declaration files in the build-importable/* folder. You can import them like this:

# First, install the package in your project
npm i @getchange/getchange.io-modules

// Then, you can import the module like this:
import '@getchange/getchange.io-modules/build-importable/change-demo';