Installation

There are several ways to start a project.

New project

Create an empty project on your machine with this script:

npx create-wallace-app

You will be given a choice of TypeScript or JavaScript. We highly recommend TypeScript, even if you plan to use JavaScript.

Stackblitz

StackBlitz lets you try Wallace in the browser without installing anything on your machine. You can choose:

• Click counter in TypeScript
• Click counter in JavaScript

Stackblitz sometimes fails to load for its own reasons, so this is perhaps not the most reliable method. Additionally the way it renders markdown tooltips isn’t great.

However it is a great way to test out Wallace, and you can always download the project and transition to working locally.

Clone an example

The Wallace github repository contains some examples which all have a StackBlitz link in their README so you can play around online, then download a fully working project.

Add to existing project

To install into an existing project run:

npm i wallace -D

This also installs babel-plugin-wallace which you need to add to your babel.config.cjs or equivalent like so:

module.exports = {
  plugins: ["babel-plugin-wallace", "@babel/plugin-syntax-jsx"],
};

You need to configure your bundler to apply those to jsx/tsx files. Here is an example webpack.config.js:

const path = require("path");

const config = {
  entry: "./src/index.tsx",
  devServer: {
    static: "./",
    hot: true,
    historyApiFallback: true
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  resolve: {
    extensions: [".js", ".jsx", ".tsx", ".ts"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules\/(?!(wallace)\/).*/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }
    ]
  }
};

module.exports = function () {
  config.mode = process.env.NODE_ENV || "development";
  if (config.mode === "production") {
    config.optimization = {
      minimize: true
    };
  } else {
    config.devtool = "eval-source-map";
    // alternative
    // config.devtool = "inline-source-map";
  }
  return config;
};

If using different bundler such as vite or parcel then you will need to adjust accordingly, taking into consideration the following points:

1. You must process the wallace package itself as we do with:

   exclude: /node_modules\/(?!(wallace)\/).*/

   Although your project may initially work without this, you’ll run into problems if you import from modules which define components, such as the router.

2. You should define your plugins in babel.config.cjs (and not in webpack.config.js or package.json) because this lets you inspect the transformations by running babel:

   npx babel src/index.tsx

   Note that this gives you Babel’s transformation of just that file, not the compiled bundle.