Setting Up Webpack

Take a look at the TODO MVC example to see how everything is put together.

You can use Paperclip with Webpack by installing the loader:

npm install paperclip-loader --save-dev

Also, be sure that you also have the following dependencies installed (If you're using NextJS, then you can skip this step):

npm install style-loader css-loader file-loader --save-dev

Paperclip emits CSS files that need to be loaded, so this is why you need to install additional dependencies.

After that, you can can include paperclip-loader in your webpack config rules:

{
  test: /\.pc$/,
  loader: "paperclip-loader",
  options: {
    
    // paperclip.config.json can be generated via the paperclip-cli tool
    config: require("./paperclip.config.json")
  }
}

☝ be sure that you have a paperclip.config.json file.

For context, here's what your entire Webpack config might look like:

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.pc$/,
        loader: "paperclip-loader",
        options: {
          
          // paperclip.config.json can be generated via the paperclip-cli tool
          config: require("./paperclip.config.json")
        }
      },

      // Required since paperclip-loader emits
      // CSS files
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: ["file-loader"]
      }
    ]
  },

  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  }
};

That's it! from there you can start using Paperclip in your UIs. For example:

<div export component as="Greeter">
  Hello {children}!
</div>

Then, in React code:

import * as ui from "./greater.pc";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<ui.Greeter>
  Paperclip
</ui.Greeter>, document.getElementById("mount"));

☝ This should render: Hello Paperclip!.