Since fabric js doesn't support tree-shaking via es6 modules for bundle size reduction i tried to do a custom build of fabricjs via website (http://fabricjs.com/build/) and via command line build and can't figure out which modules I need as I keep getting errors. I use
node build.js modules=text,circle,image,rect,line,image_filters
since to my understanding I dont use anything else. Then I got an error that sort of indicated I would need to import animation module too - even though I don't use animations from my pov. I did that an indeed the error disappeared and now I get this.drawSelectionBackground is not a function and have no clue to which package it belongs so I wonder hot to figure that out - or do I really have to just go for trial and error?
Figured it out it's the interaction module that I need to import even though I dont use interactions...
Pretty weird...
Related
I'm attempting to use a shared library for reusable components and using just 2 out of the box Create react apps. One is called 'shared-lib' the other 'project-example'. I made a super simple component in shared-lib, exported (working when I test). I NPM linked both seemingly correctly (shared-lib is in my project-example node_modules with a special icon).
I built the shared-lib, I also imported the shared component (SharedComponent)
import SharedComponent from 'shared-lib'; <- lib is in my node_modules
../shared-lib/src/index.js
SyntaxError: /Users/bemker/dev/portals-modern/shared-lib/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:3):
Add #babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
I'm following a vid tutorial and he didn't have to eject his create react app, but I'm guessing this is where the error is coming from.
Here is the vid I'm following if anyone wants to take a look. https://www.youtube.com/watch?v=B7iYJT_ll-U
Anyone know why this is occurring, or how to get past it (preferably without ejecting)?
I couldn't find a solution using the above, but there is a package similar to Create React App for building libraries that made it pretty easy. Its not maintained by FB, but it worked for me.
https://github.com/transitive-bullshit/create-react-library
https://github.com/transitive-bullshit/react-modern-library-boilerplate (multiple exports)
vid tutorial using it: https://www.youtube.com/watch?v=N8d-CLmg3hw
second w/ 'real' usage: https://www.youtube.com/watch?v=6R699AQYH74
Hope this helps someone.
Following my first question, I realized that the reason I couldn't get anything to work was that I was trying to use the require() method in the browser. In learning that this is not how Node works, I was confused. I understand now that Node is only a run-time environment that allows the use of JavaScript within the console. However, I'm still left with the question of how to achieve the functions of Node within the browser. (i.e. creating a button in the browser that creates a file using Node.) I've installed Browserify but I cannot find a good tutorial on how to use it. I'm very new to Computer Science so please forgive me for the redundant questions. Thanks a lot.
Things do change. Apparently it will be possible to use node.js in the browser soon. You might be interested in this: Run Node.js in the browser
Node as you made the point is server-side runtime environment for js and the browser is client-side. Node.js has many useful built-in functionalities and they are not accessible in browser.
I recommend you to take a look how backend and frontend differs and how do they communicate with themselves. Then I think you will understand how to achieve creating a file by clicking a button in the browser.
Sorry I don't know anything about browserify but it would be better to learn node in cli.
I'm trying to learn how to create and publish an npm package.
I have created an npm package, https://github.com/nitte93/OnBoarding
for my learning purpose.
https://www.npmjs.com/package/onBoarding
It works fine in dev build, but when I try to import it in my isomorphic react app, I get : ReferenceError: window is not defined
I have not made any explicit use of the window object in the package, but there are places where I have explicitly use jquery.
Now, I am not sure but all I understood was, that while importing this npm package in my isomorphic app, I'm trying to use the window object in NODE environment, which I assume is wrong since window object is only accessible on the browser side.
My question is how do I handle this.
1) Do I need to handle this in my npm package itself.
2)Should I handle it in my Isomorphic app? How?
Please answer or point to a right resource to solve this issue.
I looked through your repository, and the only thing I think could be the culprit is that the semantic-ui vendor js files are required in the OnBoarding.js component, which I assume is also a server rendered file. You need to instead require those packages that only run on the browser inside the client file (the one that will call ReactDom.render().. I think it's /src/example/index.js).
Also, as a rule of thumb don't put any browser specific code in componentWillMount, as that does get called on the server. componentDidMount is safe, though, as it's only called in the browser.
All, I am trying to using third party NodeJS SDK in Titanium Studio. However, I consistently encounter dependency issues, such as util.js, utils.js, ms.js, events.js etc. I tried to add the missing module manually, but it looks like it will become un-tractable as there are so many dependencies.
My questions are :
1. Is that possible to use NodeJS based SDK in Titanium Studio .
2. If so, what is the right approach to include the dependencies.
Thanks a lot!
Titanium can't get Coffee scripts to work natively (assuming you want to deploy the TitaniumWrapper.coffee). A possible solution you may want to try is hooking a plugin http://billdawson.com/titanium_coffee_script/ in order to pre-compile Coffee scripts.
You can also try to embed everything using a Tiwebview that wraps HTML to load mojio-js.js but you would still need to observe events mojio client (like replacing keys, login an user and create a few model instances).
Hope you find the info useful and can serve for further research.
I am trying to build a sort of plugin manager that can reload external source files on the fly without actually shutting down the node app. Just as a quick proof of concept is just eval'd my plugin files that simply are just functions being prototyped to a class. Everything seemed to work great, except that I cant seem to get the scoping right. The functions get evaluated and prototyped, but im not sure why the functions cant grab global vars. Does anyone have any advice on this?
Rather than manually loading the file, you could just rely on require.
Now, the only problem is that require has an internal cache and will only load modules once. However, you can force it to unload with this quick workaround:
delete require.cache[require.resolve(myPlugin)];
require(myPlugin);