Rappid and Webpack

[msteller-connyun]

Hey,

we are currently evaluating the Demo Version of RappidJS but didn’t get to work in Webpack/VueJS.

For the open source version are sources available, with a require mechanisms. We did an own JointJS Vue Plugin.

But for Rappid is only a build version available, which expects a Rappid in the global scope. The Webpack define plugin didn’t help.

Is there a way to use Rappid in a Webpack Environment?

[vtalas]

you should be able to import the whole bundle with the import joint from './rappid.min.js'; statement. rappid.min.js in the trial package includes ES5 version of the library, along with the JointJs and dependencies: backbone, jquery and lodash

However, the full version of the RappidJs comes with source codes as ESM modules, therefore you can cherry-picking just the plugins you actually need in your app

[snicro]

@vtalas I'm using the full version of Rappid and a statement like import { dia, ui } from 'rappid' still imports the whole bundle. Do you have any suggestion about how to import only what I need from the full 3.0.1 version of Rappid?

[kumilingus]

Here's a tutorial https://resources.jointjs.com/tutorial/vue-ts, that should help. Also, Rappid v3.2.0 package now includes sample VueJS apps - Chatbot and KitchenSink.

[Zilvinaskli]

I can't get this to work. I pack the vendor dir that has files from build/package and run npm install and my node modules don't contain any new folders after the install so I can't import from '@clientio/rappid';

[cezarylos-neo]

Are you using npm pack to pack the package?

[Zilvinaskli]

yes, the only thing different is that my Vue project is not typescript project

[cezarylos-neo]

Package is using index.ts file so if you don't have a ts-loader in your webpack configuration then it won't work.

[cezarylos-neo]

You could try to change index.ts file to index.js and pack it again without rappid.d.ts as you don't need it :)

[Zilvinaskli]

You could try to change index.ts file to index.js and pack it again without rappid.d.ts as you don't need it :)

it created 4 folders in node modules now (canvg-rappid, rappid, rgbcolor, stackblur) but still, imports don't work

[cezarylos-neo]

Can you provide package.json file?

[Zilvinaskli]

{
  "name": "fma-cli",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "unit": "jest",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "browser": {
    "ws": "./ws-browser.js"
  },
  "dependencies": {
    "@clientio/rappid": "file:vendor/rappid-3.2.0.tgz",
    "backbone": "1.4.0",
    "jquery": "3.4.1",
    "avatar-initials": "^4.1.1",
    "aws-amplify": "^1.1.19",
    "axios": "^0.18.0",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-transform-for-of-as-array": "^1.1.1",
    "big.js": "^5.2.2",
    "chart.js": "^2.9.3",
    "convert-units": "^2.3.4",
    "dagre": "^0.8.2",
    "date-format": "^2.0.0",
    "debounce": "^1.2.0",
    "expr-eval": "^1.2.2",
    "flatted": "^2.0.0",
    "graphlib": "^2.1.5",
    "javascript-time-ago": "^2.0.1",
    "jointjs": "^3.1.1",
    "js-interpreter": "^1.4.6",
    "json2xls": "^0.1.2",
    "lodash": "^4.17.11",
    "numeral": "^2.0.6",
    "v-calendar": "^1.0.0-beta.23",
    "v-tooltip": "^2.0.0-rc.33",
    "vgauge": "^1.1.2",
    "vue": "^2.5.17",
    "vue-async-computed": "^3.7.0",
    "vue-avatar": "^2.1.8",
    "vue-awesome-notifications": "^3.1.0",
    "vue-filter-number-format": "^2.0.0",
    "vue-image-upload-resize": "^2.3.0",
    "vue-lottie": "^0.2.1",
    "vue-moment": "^4.1.0",
    "vue-nav-tabs": "^0.5.7",
    "vue-observe-visibility": "^0.4.3",
    "vue-round-filter": "^1.1.2",
    "vue-router": "^3.0.1",
    "vue-select": "^2.5.1",
    "vue-slider-component": "^3.1.0",
    "vue-swatches": "^2.0.1",
    "vue-uuid": "^1.1.1",
    "vue-xlsx": "^0.2.1",
    "vuejs-paginate": "^2.1.0",
    "vuex": "^3.0.1",
    "xlsx": "^0.15.1"
  },
  "devDependencies": {
    "@types/backbone": "1.4.1",
    "@types/jquery": "3.3.30",
    "@types/lodash": "4.14.135",
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/babel-preset-app": "^3.2.0",
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-e2e-nightwatch": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-unit-jest": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.9.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-formatter-pretty": "^2.0.0",
    "eslint-loader": "2.1.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-vue": "^5.2.3",
    "jest-sonar-reporter": "^2.0.0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.5.17"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    }
  }
}

I've not included devDependencies last time, now it adds @types folder to node modules

[cezarylos-neo]

So in node_modules, is directory "@clientio/rappid" created?

[Zilvinaskli]

no

[cezarylos-neo]

Do you get some kind of error? In rappid build folder there should be a ready to go package, maybe you can try to use it.

[Zilvinaskli]

I don't get any errors on npm install.

I've tried installing it manually using npm install .../myproject/vendor/rappid-3.2.0.tgz it haven't created "@clientio/rappid" but it created rappid folder. I was able to do import { dia, ui, shapes } from 'rappid'; but it gives me errors when trying to do new shapes.standard.Convert({})

Uncaught TypeError: _rappid.shapes.standard.Convert is not a constructor

[cezarylos-neo]

Maybe instead of installing it to the node_modules you can create a vendor folder, place all build files there and just import from them in your code.

[Zilvinaskli]

wherever those files exist I'm not sure how could I import them.

[cezarylos-neo]

You should be able to use the import feature. Please check this tutorial for a reference https://resources.jointjs.com/tutorial/vue-ts

[kumilingus]

There is no such shape as shapes.standard.Convert() in Rappid. Is that a custom shape? If yes, you should import it directly.

// file1
export const Convert = joint.dia.Element.define('standard.Convert');

// file2
import { Convert } from 'file1';
const convert = new Convert();
convert.addTo(graph);