So, I have installed a npm module : #tinymce/tinymce-react. So, now this module's code is stored in node_modules folder in the root directory of React Project. It has two dependencies. But, where is the code for dependencies of #tinymce/tinymce-react stored?
I tried searching tinymce module (which is one of it's dependency) in my project files but I couldn't find it. So, where is the code of tinymce module stored?
Related
I failed to implement SVG-Edit into my project, can somebody show me how.
Here below is my failed solution:
Vue2: copy the compiled svg-edit code into vue project's public folder, and set vue project as multiple-page project by vue.config.js.
webpack4: install copy-webpack-plugin and make some change to webpack.config.js.
My solutions are all failed because images or reference sources are misreferenced.
Since version 4.x of SonataAdminBundle all assets are handled using NPM and WebPack.
In my project I also have some assets and JS libraries and I'm also using NPM and WebPack.
What should I do in this case? For example, SonataAdminBundle uses libraries such as jQuery, Bootstrap, but I also use them (in my package.json).
One of the ideas that came to my mind is to import the main "app.js" file (vendor/sonata-project/admin-bundle/assets/js/app.js) from SonataAdminBundle which contains all the required components to run to my main "app.js" file and then import my other additional libraries and assets. Next, I would then copy all the dependencies from the SonataAdminBundle package.json file (vendor/sonata-project/admin-bundle/package.json) and paste it into my package.json file.
I am not sure if this approach is correct.
The downside of this solution would be to compare the package.json files after each update of the SonataAdminBundle library and apply any changes.
Do you have other ideas to solve this problem?
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
Presentation:
I built an admin template (css + js) and I uploaded it to npm. The package contains the compiled css/js files in the "dist" folder, and the scss files in the "build" folder. The package has several dependencies which are listed as devDependencies in the package.json:
"devDependencies": {
"datatables.net": "^1.10.19",
"dropzone": "^5.5.1",
"laravel-mix": "^4.0.13",
...
}
There are no dependencies, which I assume is correct because I directly use the compiled css/js (the js is just jQuery code).
There's an admin.scss file which has all the imports:
#import 'abstracts/variables';
#import
'~datatables.net-bs4/css/dataTables.bootstrap4.min.css',
'~easymde/dist/easymde.min.css',
'~flatpickr/dist/flatpickr.min.css',
'~jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
'~selectizebootstrap/dist/css/selectize.bootstrap4.css';
#import
'components/alerts',
'components/cards';
I'm using the admin package in a PHP project (Laravel). The admin package is included in the devDependencies of my PHP project. The admin.css file is included in the php.scss file:
#import '../../node_modules/admin-template/dist/css/admin.css';
The problem:
I need to change some variables of the admin.scss file. So, instead of include the compiled css I need to include the scss:
#import '../../node_modules/admin-template/build/scss/admin';
If I do that, I get errors because the admin template devDependencies are not installed in my node_modules.
If do a npm install within the admin template folder, a node_modules folder is created and all the dependencies are installed inside that folder.
But the errors doens't go away, I think is because of the tilde used in the imports of the scss file: #import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css'. It's looking for the files in the root folder (not within the package).
What should I do?
Add all the admin template devDependencies as devDependencies of my PHP project? Doesn't seems right.
List the admin template devDependencies as dependencies, so when I install the package, all the dependencies get installed too? Doesn't seems right either, those are devDependencies.
Remove the tilde ~ off all the #imports in the admin.scss file? So if I need to include directly the scss I need to do an npm install within the package. And if I already have some of that packages installed in my node_modules, they'll be twice.
Any other options?
Short answer, also put them into "optionalDependencies" field of admin-template/package.json.
This way, when you:
cd php-project
npm install admin-template
# or simply `npm install` if it's already in "dependencies"
"optionalDependencies" of admin-template, like datatables.net-bs4 will be installed into top-level node_modules folder. Plus, "optionalDependencies", the semantic seems pretty damn right to me.
Now if you really care about the install footprint for users who only use .css in your package, then unfortunately, no easy way to do it.
You inevitably require users of .scss to do some extra work. You either provide a guide for them on how to do it manually, or you can provide a script to automate that.
One possible solution is you also provide a bin file.
admin-template/bin/admin-template-enable-sass.js # or .sh if you prefer
// package.json
{
"bin": "bin/admin-template-enable-sass.js"
}
This way, when user npm install admin-template, that bin file is symlinked to top-level node_module/.bin, making it runnable with npx cli command.
Now your .scss advance user can simply type:
npx admin-template-enable-sass
to let your script take care things for them.
I am working on a vue project that needs to use another private vue project as a dependency. This other private project is a vue plugin.
I have found how to tell yarn to fetch a package on a private gitlab repository by adding the following line in package.json:
"dependencies": {
"myPackage": "git+https://{token-name}:{token}#gitlab.com/path/to/repo.git#someTag"
}
This works well, and the content of my repo is downloaded in my node_modules. However, here comes my problem :
In this repo, the actual vue plugin is not at the root, it's under a subfolder of the repo, meaning the index.js at the root of the repo is not the one from my plugin (and I guess it is the one yarn will be using).
I have a custom yarn deploy script that compiles my plugin into one JS file and put it in a dist folder, however the dist folder is not versioned. I can use the gitlab CI to generate it, but still i'm pretty sure yarn won't use what is inside the dist folder.
My (broad) question is : how can I use the tools at my disposition (yarn, gitlab-ci) to be able to use my private gitlab repository as a vue-plugin for one of my other project ?
You would tell other packages how to use your packages by using the properties of your package.json. For instance, the main declaration
{
main: 'dist/index.js'
}
This tells node how to resolve your module from your package.
so require('my-vue-plugin') or import MyVuePlugin from 'my-vue-plugin' would resolve to node_modules/my-vue-plugin/dist/index.js, for example.
As far as versioning is concerned -- you don't version the file, or the folder. You version through the version property of your package.json and, in your case, through GIT by using git tag -a v(major).(minor).(patch).
The version that you tag should match the version that you specify in package.json.
I would recommend reading more about semantic versioning and creating a script (like VueJS) to auto-increment your package, version and publish.