Use Semantic UI with Lerna and yarn workspaces - semantic-ui

The Semantic UI (and Fomantic UI) installer (famously?) doesn't support yarn because of its interactive postinstall script. Even with "autoInstall": true in semantic.json, yarn will still break on the first install.
This makes it hard to keep a themed Semantic UI installation in its own package in a Lerna monorepo, when using workspaces. Even if --ignore-scripts is added to Lerna's package.json scripts, it will still run a standard yarn install by itself every now and then when making changes, and become blocked by Semantic UI.
Is there a way around this?

You can in fact get the autoInstall to work with yarn using fomantic-ui, I just ran these commands and it worked
$ yarn add fomantic-ui --ignore-scripts
$ yarn --cwd node_modules/fomantic-ui run install
semantic.json
- "autoInstall": false,
+ "autoInstall": true,
Now every time yarn install is ran it will "skip" the install script.
Make sure you are using the latest version of FUI
There is also a whole issue about this problem on the FUI repo https://github.com/fomantic/Fomantic-UI/issues/386

One way is to edit packages/semantic-ui/package.json, removing "semantic-ui" from dependencies and adding the script "install": "node ./install.js". Then create a script that spawns npm install semantic-ui --no-save, only if yarn is detected in the environment (to prevent an infinite install loop; check process.env.npm_config_user_agent).
This is a convoluted and error-prone way, however if a semantic.json with "autoInstall": true is present it will automatically install Semantic UI and run the gulp job, making the custom theme available to other packages at #monorepo/semantic-ui/dist/semantic.min.css.

Related

yarn monorepo with multiple versioning files, fix yarn version check or reset

Given the following state of my NextJS monorepo app:
monorepo with multiple private packages managed via yarn workspaces
develop is default branch, testing environment and has multiple commits ahead of main
main branch has fewer commits and only those ready for staging environment
commits to main are pushed via PRs with cherry-picking from develop
develop versioning of those private monorepo packages is all green (the yarn version check command)
version checking is disabled PR-level and branch level on main and due to cherry-picking/reverts/squash/etc. the yarn version check fails on the main branch with the following error:
yarn version check
➤ YN0001: UsageError: Your current branch contains multiple versioning files; this isn't supported:
- /Users/tbutcaru/Projects/my-nextjs-app/.yarn/versions/00648a82.yml
- /Users/tbutcaru/Projects/my-nextjs-app/.yarn/versions/009a6542.yml
- /Users/tbutcaru/Projects/my-nextjs-app/.yarn/versions/018f7b67.yml
- /Users/tbutcaru/Projects/my-nextjs-app/.yarn/versions/0197a805.yml
at h (/Users/tbutcaru/Projects/my-nextjs-app/.yarn/plugins/#yarnpkg/plugin-version.cjs:5:3539)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
....
the mentioned .yarn/versions/... files do not exist in my main branch.
Same issue here and here - closed without solution. I've already tried what others have said through comments in the mentioned links.
I've tried:
yarn version apply --all
yarn version check --interactive
upgrade to latest yarn 3.4.0 (using 2.4.2 right now)
deleted all .yarn/versions file dir + yarn.lock and reinstall all packages
manually bump all private packages versions
copy the .yarn/versions file dir from develop to main
added changesetIgnorePatterns: - '.yarn/**/*' in the .yarnrc.yml file and I no longer get the error above but the following YN0000: #my-nextjs-app/shared-components#workspace:packages/shared-components has been modified but doesn't have a release strategy attached and I've run the yarn version check --interactive, so the package has a release strategy attached, but still the yarn version check fails.
... none of the above worked.
How can I fix the "multiple versioning files" issue?
Or, at least, how do I completely reset/reinit the yarn workspace packages versions on the main branch?
Thank you!

How to remove npm files from meteor build

After upgrading Meteor to 1.3.x version NPM really came to play. But as always there is back side of the coin: build size.
On meteor 1.2.x build size is ~50MB, ~7k files
On meteor 1.3.x build size is ~190MB, ~27k files.
Twenty seven thousand files. That's quite a number. Not to mention path size exceeding 256 (a trouble for windows users).
I've dig into what meteor included into the build and it seems that all the npm_modules is here with all the stuff that is need to build some modules and their dependencies.
The question is: how to build meteor app without unnessesary npm files, leaving only the ones that are actually used by app at runtime?
Update:
On meteor 1.4.1_3 if you create a simple project meteor create dummy-project and go through all the common stuff like npm meteor install and meteor npm prune --production and them make a bundle out of it with meteor build c:\dummy --directory you will get a folder with the same 7k files and almost 2k folders (by the way it will not run node main.js out of the box as you might expect). If you tinker through folders you can find babel compiler inside that takes ~3.5k files.
Why do I need babel compiler inside compiled app?
To gain an introspective of your packages,
npm list --depth 0
to see the current packages in your project with only one level.
Inspect that list, and decide if you don't need a package and uninstall it.
You can also use other flags such as
npm list --depth 1 #the number represents the max depth
npm list --long true #for more information about the packages
npm list --global true #to check your global packages.
npm help-search <searchTerm>
Hope that helps you gain more insight in your packages. help-search Link
You may see that multiple packages depends on the same packages, and then it's up to you to decided what your application needs to run successfully.
Edit 1
You can exclude the packages inside your devDependencies, so that when you're publishing/deploying your code you have a cleaner package.
You do this by using npm prune --production - that removes all your devDependencies, and will require your users to do a npm install for your package to work. For info here

Can I multiple run npm installs simultaneously

If I'm setting up a project and running npm install -abc xyz, can I run another npm install in another terminal instance, for the same project, whilst this is still running?
Thanks!
You can install multiple packages with a single command like this:
npm install --save package1 package2 package3 ...
EDIT:
Installing packages separately, while theoretically possible, could create problems. When an install command is issued, npm looks up existing modules and downloads missing packages into a staging folder .staging inside node_modules. Once downloaded it copies the packages into the node_modules sub-folder (and removes .staging).
In npm2, modules had their own dependencies stored underneath themselves like this:
node_modules
- dependencyA
- node_modules
- dependencyC
- dependencyB
- node_modules
- dependencyC
Notice how dependency A and B both rely on C. If C is the same version in both cases, it would use twice the space.
In npm3, dependencies are flattened like this:
node_modules
- dependencyA
- dependencyB
- dependencyC
If for some reason an older version is used in a dependency, it follows the npm2 convention for that module.
I'd stick with the intended use of npm and use the multiple install functionality.
I simply use the following
example
npm i daterangepicker select2

Where does Meteor's installer put node and npm?

I just started learning Meteor JS on a fresh copy of OSX. I used the Meteor install instructions to install it. Everything works well - I can install Meteor packages and run the local instance. But where is Node.js and npm? I assume it must be installed with Meteor because everything runs, but the npm and node command is not available. Am I supposed to install Node separately?
Thanks,
Kevin N.
Edit: Corrected npm in the question title which OS X keeps changing to nom.
As of METEOR#1.1.0.2, node and npm are stored in :
/home/username/.meteor/packages/meteor-tool/1.1.3/mt-os.linux.x86_64/dev_bundle/bin/
(The path depends on both the username and architecture of course).
If you're doing only Meteor dev, you won't need node on its own, you might however need npm to install Meteor related tools such as Meteor Up (mup), in which case you need to install npm separately or alias the command to use the Meteor one.

Node-csv-npm install causes Meteor to hang at "Starting your app..."

I created a new meteor app using meteor create, including bootstrap and coffeescript.
Then I added the following packages:
sudo npm install -g meteorite
mrt add filepicker
sudo mrt add xml2js
All is well at this point. I can start the app and see Hello World just fine.
Then I try to add the csv package:
sudo mrt add node-csv-npm
Install goes well, but when I go to start the app, in the terminal, it hangs at "Starting your app."
Open to any ideas.
Thanks!
This is not tied to the node-csv-npm package, I had the problem with another one that was working great an hour ago, but needed to be re-added due to branch merging. Unfortunately, the only solution I've found is a brutal one:
Remove all traces to the package from packages folder, smart.json, smart.lock and packages/.gitignore to be sure.
After that, manually add package/packagename folder with source of the package.

Resources