How to override version to master using Bower? - angularjs

In my app is using froala/angular-froala plugin which requires froala/wysiwyg-editor plugin.
So I've included all as usual, but I need change version from 1.2.6 to latest commit from master branch, and I do so:
"overrides": {
"angular-froala": {
"main": [
"src/angular-froala.js",
"src/froala-sanitize.js"
],
"dependencies": {
"FroalaWysiwygEditor": "master",
"angular": "~1.2.22"
}
},
"FroalaWysiwygEditor": {
"version": "master",
"main": [
"css/froala_editor.min.css",
]
}
}
but why it didn't work? Why it is still using 1.2.6 (latest release version)? How to specify to use latest commit and override?

Update: Why do you need to change the version of a dependency's dependency? In this case froala/angular-froala's has defined its own dependencies, since it needs those to build.
If you change the dependencies of a package, you do not own, you might actually break the build process. Instead of trying to override this, you can do 2 things:
Propose an change to froala to update their bower.json on the master branch - very unlikely.
Fork froala/angular-froala, update the dependencies in the bower.json and add your fork as a dependency of your current project.
Get the latest version for a dependency
To get the latest commit from a specific branch or commit via bower, use a dependency like this where the string after the hashtag is either the branch name or the git commits SHA:
"dependencies": {
...
"angular-froala": "git://github.com/froala/angular-froala.git#master"
...
}
You can also install it that way:
bower install --save git://github.com/froala/angular-froala.git#master

Related

React.version stating older version than is in package.json

I am attempting to use the React devtools to produce a flamegraph profile of my app, but I was greeted with the message:
After checking my package.json version number, I saw it was set to "^16.4.1".
I performed an update to both the React and React-Dom versions: npm i --save react#16.5 && npm i --save react-dom#16.5, which updated both versions in the package json to "^16.5.2". I also cleared my node_modules and deleted the package.lock before doing an npm install once again.
However, when I run both my local instance of the app and push changes to my staging environment, it is outputting 16.14.0 as the version number that I have specified to log out in at the start of the App.jsx...
This is puzzling also as the logged out a version earlier than my package.json originally stated...
Is there somewhere that I am missing to update versions that could be causing this?
I have done a global search in my project for 16.14 to see if there is anything and it seems that some of my dependencies have mentioned this version, but I wouldn't think that it would be an issue?
package.lock
------------
"dependencies": {
...
"react": {
"version": "16.14.0",
...
},
...
"react-dom": {
"version": "16.14.0",
...
},
...
}
I don't understand what is going wrong here?

How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?

I have a fun project made with create react app. I want to convert the same application to a browser extension. This idea forces me to make the project a mono repo. Because in both applications, I will use the same components, hooks, providers, etc.
I don't want use Lerna or Yarn workspaces. And, this will be my first monorepo. I want to get start with Turborepo. However, I couldn't imagine how to make it work in a good way.
My targeted folder structure exists below
apps/
app1/
app2/
packages/
components/
hooks/
providers/
styles/
package.json
package-lock.json
I will import monorepo dependencies from packages folder into apps exists in apps folder.
For instance;
import { useExampleHook } from '#projectname/hooks'
import { ExampleComponent } from '#projectname/components'
If you have another solution besides Turborepo, don't hesitate to let me know. NPM workspaces is an acceptable solution as well. But, turborepo has the priority due to better performance.
Thanks in advance for your time and answer
TL;DR:
You can do this by using yarn workspaces to make the project a monorepo and then add turborepo to it as a dev dependency.
Steps:
Create a yarn workspace.
Configure your repositories root package.json file from step 1 as:
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
}
Now assuming from your example, you want to import files from packages/hooks into apps/app1, do the following:
//packages/hooks/package.json
{
"name": "hooks", // This can also be "#projectname/hooks" if you prefer
"version": "1.2.3",
...
}
//apps/app1/package.json
{
"name": "app1",
"version": "2.3.4",
"dependencies": {
"hooks": "1.2.3" //This version here must be same as the one in hooks package.json
}
}
// Some js file in apps/app1/...
import { useExampleHook } from "hooks";
...
Now if you want you should be able to install Terborepo to manage your monorepo. (Haven't personally tried this step but theoretically should work)
Tips:
Go through the yarn workspace docs and tutorials.
If you want to convert an existing react project into a monorepo, first transfer all your files to a folder such as root-dir/apps/app1 and then follow from step 1 inside root-dir.
Turborepo has great explanation on how to do it, right in their docs.
In short:
Turborepo is considered to be a taskrunner. So, it is added as a development dependency to your existing project.
npm install turbo -D
The only thing you should watch out tho is the turbo tasks itself.
So, you will have to tweak your start scripts and pipelines.

Use components from two versions of the same library (npm / Material UI in my case)

I'm using the latest stable version of Material UI in my production React app.
I need the updated Data Tables component, which is currently in Material UI's unstable alpha branch.
I don't want to upgrade my whole app with npm i material-ui#next because of the numerous breaking changes.
How can I access the alpha library without upgrading my whole library? Can I install two versions of MUI? Can I call on the alpha API without installing it through NPM?
Thanks in advance.
After some googling, found this. To use both versions:
yarn add material-ui#latest
yarn add material-ui-next#npm:material-ui#next
Then you can use
import Divider from 'material-ui-next/Divider'
or
import Divider from 'material-ui/Divider'
I created in /packages a folder called material-ui-next with only a package.json inside it which contains :
{
"name": "material-ui-next",
"version": "1.0.0",
"scripts": {
"postinstall": "mv node_modules/material-ui/* ."
},
"dependencies": {
"material-ui": "next"
}
}
So now from the root of the project one can do npm install packages/material-ui-next --save then one can createPalette = require('material-ui-next/styles/palette') or whatever one wants to require from material-ui now aliased as material-ui-next.
Explanations : as "material-ui": "next" is a dependency it's will be installed in node_modules/material-ui so by adding a script after the package material-ui-next is installed to move node_modules/material-ui to the root of the package we can require('material-ui-next/WHATEVER')

What gulp-release-tasks exactly does?

I couldn't understand what does the gulp-release-tasks module exactly. it's written that it's a "scoped release tasks for gulp" : what is that ?! and that it "bumps the versions of your package.json and bower.json" what does it mean? i found it used in a project generated automatically with the generator-gulp-angular.
Bower and npm are package managers and bower.json and package.json are their configuration files (respectively).
You can install and save your project dependencies with commands like bower install [package] --save which will add records to your bower.json (or package.json).
In those configurations files you specify version of your project and repository (you want to keep clean record of what dependencies belong to which versions of your project):
"repository": "[your repository]",
"version": "0.0.3",
This is where gulp-release-tasks comes into play. It allows you to automate process of managing semantic versioning (doc) of those configs. You can run commands such as gulp bump --minor which will bump version (for example) from v0.0.3 -> v0.1.0, commit changes and automatically push to your repository. Or you can perform those operations directly from your gulp tasks.

What is the recommend way to arrive at AngularJS 1.5.+, with LiveReload when upgrading from 1.3.7?

I have a Wakanda 10, community version, solution that uses AngularJS 1.3.7, and it does not yet use LiveReload.
I want to upgrade to Wakanda 11, community version,AngularJS 1.5+, with LiveReload.
What is the simplest way to do this?
I understand that I may have to do coding changes.
Should I download the Wakanda 11, community version, and start a new project with it that has LiveReload built-in, and then copy my Project into it and debug?
In order to upgrade your application you have two face two different problematics:
A) Upgrade AngularJS from 1.3.7 to 1.5.x.
This step is pretty straight-forward. It's necessary to replace your AngularJS library inside your application with the version you desire.
If a bower.json is included in your application (and it should be since we are speaking of a Wakanda scaffolded application) then you can modify the following lines:
"dependencies": {
"angular": "~1.4.4",
"angular-wakanda": "~1.0.4"
}
and run in terminal from the folder of the application the command bower update to do it automatically.
Update angular-wakanda to the latest compatible version.
Please note that you are upgrading minor versions of AngularJS and probably also angular-wakanda. Minor changes in API and methods can be present and break your application.
B) Add live-reload to your application
Many efforts have been done in the latest Wakanda Studio versions to achieve agnostic compatibility with different scaffoldings. Adding live-reload to your Wakanda application means adding a standard live-reload kit as you normally do with web applications.
It can be made with Gulp, Webpack, Grunt, Browserify. Wakanda Studio would try to run any environment.
Since the angular-wakanda + Gulp live-reload environment is the one included in the actual scaffolding, I suggest you to start with it as follows:
In the package.json file add the following devDependencies:
"devDependencies": {
"gulp": "^3.9.0",
"gulp-connect": "^2.2.0",
"http-proxy-middleware": "^0.9.0",
"minimist": "^1.2.0"
}
In order to trigger gulp, add to the same files the following scripts to your package.json file:
"scripts": {
"serve": "gulp serve",
"start": "npm run serve"
}
Create or copy from an existing Wakanda solution the gulpfile.js file. You can copy this gulpfile.js if you prefer a more generic approach than the actual included in the base solution. It's important to adapt the configuration parameters to your actual application scaffolding if necessary:
var defaultOptions = {
default: {
serverUrl: 'http://127.0.0.1:8081',
port: 8000,
livereloadPort: 35729,
app: 'app/',
output: 'app/',
}
};
Finally re-open the solution and click Run Page. This should trigger an npm install and an npm start, which will trigger gulp serve which will enable live-reload.
Please note that the implementation can have minor configuration differences depending on the Wakanda Studio version you are using. I suggest you to always update to the latest available.
For a deeper understanding on Wakanda Studio build process I also suggest you to check out this tutorial which also explain how to add SASS precompilation to the application.

Resources