Comments (5)
Modules should be separated, and those individual modules should require only what they depend on. I'm doing some preliminary testing with this library and if it works well with my codebase I can take a stab at this.
from react-konva.
To solve this I created the file custom-konva.js
with content:
/**
* In webpack config should be defined:
* alias: {
* "konva": path.resolve(ROOT, "./custom-konva.js"),
* },
*/
var Konva = require("./node_modules/konva/src/Core");
require("./node_modules/konva/src/Animation");
require("./node_modules/konva/src/Tween");
require("./node_modules/konva/src/DragAndDrop");
require("./node_modules/konva/src/shapes/Circle");
require("./node_modules/konva/src/shapes/Line");
require("./node_modules/konva/src/shapes/Path");
require("./node_modules/konva/src/shapes/Rect");
require("./node_modules/konva/src/shapes/Text");
module.exports = Konva;
from react-konva.
Just implemented minimal version bundle, so it should work without extra config from bundlers. It is available with [email protected]
.
// load minimal version of 'react-konva`
import { Stage, Layer, Rect } from "react-konva/lib/ReactKonvaCore";
// minimal version has to support for core shapes and filters
// if you want import a shape into Konva namespace you can just do this:
import "konva/lib/shapes/Rect";
Demo: https://codesandbox.io/s/6l97wny44z
More info: https://github.com/konvajs/react-konva#minimal-bundle
Have a question? Ask here.
from react-konva.
I think it should be possible to do this manually.
- Define alias in webpack conf:
{
// ...
resolve: {
alias: {
'konva': './src/my-konva-version.js'
}
}
// ...
}
- Make
./src/my-konva-version.js
and require insede it only necessary modules:
import Konva from 'konva/src/Core';
// now you have Konva object with Stage, Layer, FastLayer, Group, Shape and some additional utils function
// so there are no shapes (rect, circle, etc), no filters, no d&d support.
// but you can simply add anything you need:
import 'konva/src/shapes/rect';
//now Konva.Rect is available to use
I didn't test that. But in theory, should work. It will be nice to have a better way. Any ideas are welcome.
from react-konva.
is there anyway to do this with rollup? It looks the rollup-plugin-alias
doesn't currently support aliases node modules. This pull request is still open from june 18th
from react-konva.
Related Issues (20)
- Facing the issue now with Next.js 14: HOT 5
- OnTouchStart does not contain touches HOT 1
- getRelativePointerPosition has an offset on x when going fullscreen
- Asynchronous drawing will exceed the cropping area HOT 4
- Free drawing performance HOT 6
- Transformer is not reusable HOT 2
- Coordinates not working correctly after zoom in/out or drag of stage HOT 1
- If I want to erase only the lines drawn with a pen, how can I do that? HOT 2
- Rendering <Context.Consumer.Provider> is not supported and will be removed in a future major release. HOT 1
- Arrow Drag and Transform using anchors not working HOT 4
- load data to stage HOT 1
- Positioning issue with transformer using keepRatio prop set to false HOT 1
- Breaking changes in React experimental branch
- TypeScript : `'cornerRadius'` does not exist on type `Shape<RectConfig>` HOT 4
- Trouble with Drag-and-Drop on Mobile Devices in React (with react-konva) HOT 1
- g
- Cannot drag the group if I do not drag the elements inside it HOT 1
- How to draw holes in polygons? HOT 1
- How to update the clipFunc state HOT 4
- Konva – How to Make a Stage Fill the View and Implement Zoom In/Out Based on Position and Current Scale, Along with Drag Boundaries? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-konva.