Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create standalone examples with rollup and other build tools

See original GitHub issue

Description

Hey! After playing around with the with-next example (see also #193), I failed to create a minimal working example using the WYSIWYG editor package with rollup. Seeing as you use rollup as well, maybe you could help me out?

It seems the with-next example is heavily tied to this repo as well (hence building it was necessary, see #193), but I fail to get ReMirror running properly. :\

Possible Implementation

Here’s a very crude example that I couldn’t get working. To anyone reading this, it should not serve as a working example, it was just thrown together really quickly and does not work.

// package.json
{
  "private": true,
  "dependencies": {
    "@emotion/core": "^10.0.27",
    "@remirror/editor-wysiwyg": "^0.7.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.1",
    "@rollup/plugin-json": "^4.0.1",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "@rollup/plugin-replace": "^2.3.0",
    "@rollup/plugin-typescript": "^2.1.0",
    "@types/prosemirror-view": "^1.11.2",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "rollup": "^1.29.1",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-replace": "^2.2.0",
    "tslib": "^1.10.0",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w"
  }
}

// src/main.tsx
import ReactDOM from "react-dom"
import React from "react"
import { WysiwygEditor } from "@remirror/editor-wysiwyg"

export const MyWorldClassEditor = () => {
  return <WysiwygEditor />
}

document.addEventListener("DOMContentLoaded", function() {
  ReactDOM.render(<MyWorldClassEditor />, document.getElementById("editor"))
})

// rollup.config.js
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
import babel from "rollup-plugin-babel"
import replace from "@rollup/plugin-replace"
import typescript from "@rollup/plugin-typescript"
import json from "@rollup/plugin-json"
import react from "react"
import reactDom from "react-dom"
import server from "react-dom/server"

module.exports = {
  input: "src/main.tsx",
  output: {
    file: "public/bundle.js",
    format: "iife",
    sourcemap: true
  },
  plugins: [
    resolve(),
    typescript(),
    json(),
    babel({
      exclude: "node_modules/**",
      presets: ["@babel/env", "@babel/preset-react"]
    }),
    replace({
      "process.env.NODE_ENV": JSON.stringify("production")
    }),
    commonjs({
      include: "node_modules/**",
      // left-hand side can be an absolute path, a path
      // relative to the current directory, or the name
      // of a module in node_modules
      namedExports: {
        react: Object.keys(react),
        "react-dom": Object.keys(reactDom),
        "react-dom/server": Object.keys(server),
        "node_modules/deepmerge/dist/cjs.js": ["all"]
      }
    })
  ]
}

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReMirror</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="bundle.js"></script>
  </head>
  <body>
    <div id="editor" style="height: 100vh;"></div>
  </body>
</html>

Checklist

I have read the contributing document.

Issue Analytics

State:
Created 4 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

ifiokjrcommented, Jul 18, 2020

I’ll close this once I have a working example of the new @remirror/react-wysiwyg.

1reaction

ifiokjrcommented, Jun 18, 2020

Just so you know there are probably other things broken in the branch, but thanks for taking a look. I’m working to get everything ready on the next branch.

Top Results From Across the Web

rollup.js

This allows you to build on top of existing tools and modules without adding extra dependencies or bloating the size of your project....

Standalone Builds - SurviveJS

Microbundle is a zero-configuration tool, based on Rollup, to create bundles for browsers (UMD), Node (Common.js), and bundlers with ECMAScript modules support, ...

The Ultimate Guide to Getting Started with the Rollup.js ...

Rollup.js has some competition with build tools such as webpack, Snowpack, and Parcel. As well as JavaScript module bundling, these can handle ...

How to Bundle JavaScript With Rollup — Step-by-Step Tutorial

This week, we're going to build our first project using Rollup, which is a build tool for bundling JavaScript (and stylesheets, but we'll...

Building for production - Lit.dev

When building an application that includes Lit components, you can use common JavaScript build tools like Rollup or webpack to prepare your source...