Bitsrc eject component if there is no update to export - javascript

I'm using Bitsrc.io to manage shared components.
Sometimes it happens that I import a remote component which adds the physical files to my project.
I then want to eject the module so that it is managed by npm again.
However I haven't made any changes so bit-cli responds with
nothing to export
On their docs site I cannot find another reference to using the --eject flag except with the export command.
Anyone bumped into this before?

Right now in order to achieve this you need to run the following commands:
bit remove id
npm install id-npm
(*) - look in the bitsrc ui as they way id looks like in bit registry is different from npm.
if you do make changes you can do bit export --eject which will do remove and npm install. This command is currently being developed in the dev branch and is probably going to be available in the next release. You can also force an export if you force a tag by using --all flag or --scope. I advice against it.

Related

How to modify a npm package locally and build into create-react-app?

I can see that my node_modules/ag-grid-react/lib (the module I'm trying to build locally) have changed (I put console.log commands in main.js, the entry point of ag-grid-react), but the changes are not propagating to my create-react-app even after restarting npm start and running npm cache clean --force. What a I missing?
I believe the crux of the issue is closer to me not understanding how the create-react-app/npm package/typescript/webpack build system works behind the scenes (as opposed to this being an ag-grid issue), but I am including the whole context of my problem in case it's relevant.
Original problem: I'm using ag-grid-react, and I want to inject a button to add a new column, like the image below:
It didn't seem like any of the exposed component allows me to do this, so I have been exploring two options:
Bring ag-grid into my monorepo and fork/modify it
Inject a component with appendChild by finding the ref of the ag-header-row element and creating another react root.
(1) seems cleaner so I'm trying that. I cloned ag-grid via git subtree to my repo, and I am trying to load it in my create-react-app. Here is what I have done so far:
git sub-tree add ag-grid
npm link the local ag-grid/grid-packages/ag-grid-react to my monorepo node_modules
make a modification to the files in community-modules/react/src
run npm run build in grid-packages/ag-grid-react
run npm start in my create-react-app monorepo
I have figured out that grid-packages/ag-grid-react copies the src from community-modules/react before building, via Gulp, but I can't figure out how to load the new build. Anytime I make a modification to community-modules/react/src and run the above steps, no changes propagate to my create-react-app. It almost feels like something is being cached but I can't figure out where.

How to trigger hot reloading for React when a package in node_modules is changed?

I am building a React component library and additional documentation project. My goal is to display immediately all changes of the library straight into the documentation.
So far I have configured webpack to watch for changes in the components. After rebuilding, I take the output folder and move it in the node_modules of the documentation. This way I can simulate using my component library as an external package.
The documentation is a create-react-app project and by default it does not watch for changes in node_modules. I followed this answer and executed the eject script. I updated the ignoredFiles variable in webpackDevServer.config.js and everything is working really fine. I make a change in a component, webpack recompiles, updates the package in the node_modules of the docs and then a rebuild is triggered. However, I have to refresh the browser to see the changes. Hot reloading happens when I do a change in the source of the docs, but it will be great to trigger it when I update that specific package in the node_modules. Is there a way to achieve that?
Thank you for spending time on this!
You can setup a local dependency that points to your package.
"dependencies": {
"package-name": "file:../relative/path/to/your/package"
}
Then, when you created the dependency, rebuild the relative path to the module containing your package.json in watch mode and you are ready to go!

The global CKEDITOR_VERSION constant has already been set on vue

I am creating Vue spa and integrating CKEditor here using this package I tried to do just like the tutorial by adding this to my app.js
import Vue from 'vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import documentEditor from '#ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const options = {
editors: {
classic: ClassicEditor,
document: documentEditor
},
name: 'ckeditor'
}
Vue.use(VueCkeditor.plugin, options);
and to make it work I doing NPM install to those 2 editors (ClassicEditor and documentEditor)
npm install --save #ckeditor/ckeditor5-build-decoupled-document
and since I also need CKEditor but with much more simpler or to being said without image upload features then I for the ckeditor5 build classic and remove those plugin from there and then NPM build and then I am doing this on my Vue spa
npm install --save #ckeditor/ckeditor5-build-classic
after that, I open #ckeditor folder on node_modules and find the ckeditor5-build-classic folder and replace build folder with my custom version of CKEditor build classic
but then I get this error
ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set.
even though the editor still working, but I don't like the idea my console showing error
This problem is precisely described in docs, you can't run two editors from different builds on the same page (or mixing builds and source code).
tl;dr; The easiest way to enable running two different editors on the same site is to create a custom build that will export these two builds. This is described in the above docs.
The behavior has changed ~3 months ago and the error has been added to such situation to prevent bugs and big size of the bundle. Therefore the author of the https://github.com/igorxut/vue-ckeditor5 can just update the readme to follow the latest version's API.
I recommend to create "super build".
For example you can clone repository of classic build and change 3 files.
Check my gits.
I updated example1 for using this build.

Import local JS files into Meteor

I'm having terrible problems when trying to import an external JS project into my meteor folder. This is the project I'll like to use: http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
As you can see, it is necessary to import two scripts. The first one is JQuery, and that was easily solved by adding it with meteor add jquery.
The problem came out when I tried to import the second script. I'm not sure how I can use it because, as far as I know, on meteor you cannot just import your script into the head section. For that reason, I've created a new template that is rendered and I put the code in there, but nothing happenend. Later on I've created an event that calls the JS when the image is clicked but without any success.
My question is, Which is the correct way to import a local JS code in meteor as in HTML is done with:
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
Since jquery-imagemapster is available as an npm package you can do:
$ npm install jquery-imagemapster
In your project directory and make it available to your project that way.
In early versions of Meteor packages were only available via atmosphere and $ meteor add. Later they added npm support and all npm packages became available.
Prefix npm installs with “meteor” -> “meteor npm install —save ‘js file’. Initializing will be the same as it would be in any other front end environment as will importing it. If you’re having trouble after that, check for it’s existance in your browser console and work from there using its built in properties and methods.

How to watch react-native node_modules changes

When I run react-native start or npm start the packager starts and prompts to be Looking for JS files in /Users/map/repos/myrepo/
I've got Hot reloading enabled. When I change a file located within /Users/map/repos/myrepo/node_modules/react-native/ seems to detect the change, however if I edit a file in a third party repository like /Users/map/repos/myrepo/node_modules/react-native-menu/ looks like watchman is not detecting the change.
I've just upgraded React Native in my project to 0.39 and I think this wasn't the default behavior before. I've set up some logging in react-packager/src/node-haste/index.js and seems react-native-menu files are included in hasteFSFiles, however change event is not triggered.
I've tried deleting node_modules and reinstalling it, Cleaning Watchman state and other without luck.
Ok, Looks like they redid React Native packager in version 0.39, although this bug is still present in v0.40. Until there is an official fix, if you want to detect changes of a library within node_modules you need to edit node_modules/react-native/packager/defaults.js and add your project name to providesNodeModules, like this:
exports.providesModuleNodeModules = [
'react-native',
'react-native-windows',
'react-native-menu',
];
The issue where this has been reported can be found here:
https://github.com/facebook/react-native/issues/11301
Another solution is to start react native packager with additional arguments
npm run start -- --providesModuleNodeModules react-native,{any_node_module}
Works with RN v0.42.0 for me

Categories

Resources