mirror of
https://github.com/excalidraw/excalidraw-embed.git
synced 2026-05-17 13:30:39 +00:00
Add entry point for embed excalidraw and build the bundle with webpack(#1)
This commit is contained in:
Aakansha Doshi
@@ -13,3 +13,4 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
yarn.lock
|
||||
.idea
|
||||
dist
|
||||
|
||||
Generated
+5449
-1004
File diff suppressed because it is too large
Load Diff
+48
-25
@@ -1,4 +1,12 @@
|
||||
{
|
||||
"name": "excalidraw",
|
||||
"version": "0.0.0",
|
||||
"main": "dist/excalidraw.min.js",
|
||||
"files": [
|
||||
"dist/excalidraw.min.js",
|
||||
"dist/excalidraw.min.css",
|
||||
"dist/socketIoClient.min.js"
|
||||
],
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
@@ -18,46 +26,63 @@
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"browser-nativefs": "0.10.1",
|
||||
"i18next-browser-languagedetector": "5.0.0",
|
||||
"lodash.throttle": "4.1.1",
|
||||
"nanoid": "2.1.11",
|
||||
"open-color": "1.7.0",
|
||||
"points-on-curve": "0.2.0",
|
||||
"pwacompat": "2.0.15",
|
||||
"roughjs": "4.3.1",
|
||||
"socket.io-client": "2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.9.0",
|
||||
"@babel/plugin-transform-arrow-functions": "7.8.3",
|
||||
"@babel/plugin-transform-async-to-generator": "7.8.3",
|
||||
"@babel/plugin-transform-typescript": "7.9.4",
|
||||
"@babel/preset-env": "7.9.5",
|
||||
"@babel/preset-react": "7.9.4",
|
||||
"@babel/preset-typescript": "7.9.0",
|
||||
"@sentry/browser": "5.20.1",
|
||||
"@sentry/integrations": "5.20.1",
|
||||
"@testing-library/jest-dom": "5.11.1",
|
||||
"@testing-library/react": "10.4.7",
|
||||
"@types/jest": "26.0.7",
|
||||
"@types/lodash.throttle": "4.1.6",
|
||||
"@types/nanoid": "2.1.0",
|
||||
"@types/react": "16.9.43",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@types/socket.io-client": "1.4.33",
|
||||
"browser-nativefs": "0.10.1",
|
||||
"i18next-browser-languagedetector": "5.0.0",
|
||||
"lodash.throttle": "4.1.1",
|
||||
"nanoid": "2.1.11",
|
||||
"node-sass": "4.14.1",
|
||||
"open-color": "1.7.0",
|
||||
"points-on-curve": "0.2.0",
|
||||
"pwacompat": "2.0.15",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"react-scripts": "3.4.1",
|
||||
"roughjs": "4.3.1",
|
||||
"socket.io-client": "2.3.0",
|
||||
"typescript": "3.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash.throttle": "4.1.6",
|
||||
"asar": "3.0.3",
|
||||
"babel-loader": "8.1.0",
|
||||
"babel-plugin-transform-class-properties": "6.24.1",
|
||||
"css-loader": "3.5.2",
|
||||
"eslint": "6.8.0",
|
||||
"eslint-config-prettier": "6.11.0",
|
||||
"eslint-plugin-prettier": "3.1.4",
|
||||
"husky": "4.2.5",
|
||||
"jest-canvas-mock": "2.2.0",
|
||||
"lint-staged": "10.2.11",
|
||||
"mini-css-extract-plugin": "0.8.0",
|
||||
"node-sass": "4.14.1",
|
||||
"pepjs": "0.5.2",
|
||||
"prettier": "2.0.5",
|
||||
"rewire": "5.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"react-scripts": "3.4.1",
|
||||
"rewire": "5.0.0",
|
||||
"sass-loader": "8.0.2",
|
||||
"terser-webpack-plugin": "2.3.5",
|
||||
"ts-loader": "7.0.0",
|
||||
"typescript": "3.9.7",
|
||||
"webpack": "4.42.0",
|
||||
"webpack-cli": "3.3.11"
|
||||
},
|
||||
"homepage": ".",
|
||||
"husky": {
|
||||
@@ -70,11 +95,8 @@
|
||||
"node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-nativefs)/)"
|
||||
]
|
||||
},
|
||||
"name": "excalidraw",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build-node": "node ./scripts/build-node.js",
|
||||
"build:app:docker": "REACT_APP_INCLUDE_GTAG=false REACT_APP_DISABLE_SENTRY=true react-scripts build",
|
||||
"build:app": "REACT_APP_INCLUDE_GTAG=true REACT_APP_GIT_SHA=$NOW_GITHUB_COMMIT_SHA react-scripts build",
|
||||
"build:zip": "node ./scripts/build-version.js",
|
||||
"build": "npm run build:app && npm run build:zip",
|
||||
@@ -91,7 +113,8 @@
|
||||
"test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
|
||||
"test:other": "npm run prettier -- --list-different",
|
||||
"test:typecheck": "tsc",
|
||||
"test": "npm run test:app",
|
||||
"test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
|
||||
"test": "npm run test:app"
|
||||
"build:umd": "NODE_ENV=production webpack --config webpack.prod.config.js"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import App from "./components/App";
|
||||
|
||||
import "./css/styles.scss";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const Excalidraw = (props: Props) => {
|
||||
useEffect(() => {
|
||||
const handleTouchMove = (event: TouchEvent) => {
|
||||
// @ts-ignore
|
||||
if (event.scale !== 1) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("touchmove", handleTouchMove, { passive: false });
|
||||
|
||||
return () => {
|
||||
// @ts-ignore
|
||||
document.removeEventListener("touchMove", handleTouchMove);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <App />;
|
||||
};
|
||||
export default Excalidraw;
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
const path = require("path");
|
||||
const webpack = require("webpack");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const TerserPlugin = require("terser-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: {
|
||||
"excalidraw.min": "./src/excalidraw_wrapper.js",
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
library: "Excalidraw",
|
||||
libraryTarget: "umd",
|
||||
filename: "[name].js",
|
||||
},
|
||||
resolve: {
|
||||
extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(sa|sc|c)ss$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: "css-loader", options: { url: false } },
|
||||
"sass-loader",
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(ts|tsx|js|jsx|mjs)$/,
|
||||
exclude: /node_modules\/(?!(roughjs|socket.io-client|browser-nativefs)\/).*/,
|
||||
use: [
|
||||
{
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly: true,
|
||||
configFile: "tsconfig.prod.json",
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: [
|
||||
"@babel/preset-env",
|
||||
"@babel/preset-react",
|
||||
"@babel/preset-typescript",
|
||||
],
|
||||
plugins: [
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
"@babel/plugin-transform-arrow-functions",
|
||||
"transform-class-properties",
|
||||
"@babel/plugin-transform-async-to-generator",
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
test: /\.js($|\?)/i,
|
||||
}),
|
||||
new webpack.optimize.LimitChunkCountPlugin({
|
||||
maxChunks: 2,
|
||||
}),
|
||||
],
|
||||
},
|
||||
plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
|
||||
externals: {
|
||||
react: {
|
||||
root: "React",
|
||||
commonjs2: "react",
|
||||
commonjs: "react",
|
||||
amd: "react",
|
||||
},
|
||||
"react-dom": {
|
||||
root: "ReactDOM",
|
||||
commonjs2: "react-dom",
|
||||
commonjs: "react-dom",
|
||||
amd: "react-dom",
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user