Using a library sibling folder container for shared packages - javascript

I have many applications in a mono git repository. I'd like to share some libraries between my applications.
Here is is my directory structure:
.
├── libs
│   └── messages
| ├── package.json
| ├── src
| ├── tsconfig.json
| └── ...all other good things for a library
├── main
│   ├── config
│   ├── dist
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── src
│   └── tsconfig.json
├── README.md
└── server
├── main.ts
├── node_modules
├── package.json
├── package-lock.json
├── setupEnvVars.js
├── src
└── tsconfig.json
I want to add the library "message" to my project "main" so I tried to add it this way:
{
"name": "me",
"version": "1.0.0",
"main": "index.js",
"private": true,
"dependencies": {
"#me/messages": "../libs/messages/"
}
}
I'm stuck because it doesn't work (but doesn't throw errors either). Can you help me? Thanks!

I'd need to see more about the content of each package.json files and the project overall, but here are some elements which may help you get a goo structure that would accomplish what you have set yourself to do.
If you really want to go the proper monorepo way, you might want to have a look at https://github.com/lerna/lerna which will work well enough for Node 8 and up (e.g. auto-symlink of file dependencies, which is useful during development).
Another way to solve this issue in TypeScript is using paths:
tsconfig.json
{
"compilerOptions": {
// path
"baseUrl": ".",
"paths": {
"#lib/*": ["./*"],
"#shared/*": ["../shared/*"]
}
}
However, depending on how you build and run your projects, paths are sometimes not processed properly. You may need to use tsconfig-paths if you run your project using ts-node, or tsconfig-paths-webpack-plugin if you are using TypeScript as part of a webpack project.

Related

What is the proper way to bundle assets with an NPM module?

I have a library, let's call it my-lib. The packaged code contains some JS and type declarations for that code in /dist, as well as a number of SVG files in /assets:
my-lib
├── assets
│   ├── a.svg
│   ├── b.svg
├── dist
│   ├── index.d.ts
│   ├── index.mjs
│   ├── index.umd.js
├── LICENSE
├── package.json
My intention is to have the JS modules exported on the root of the package, my-lib, with the assets importable from my-lib/assets (when using an appropriate plugin for the user's framework and bundler, E.G. vite-plugin-svgr for React+Vite). This seems to work by default in a create-react-app project with Webpack using import { ReactComponent as A } from "my-lib/assets/a.svg"; and the right declaration file to appease TypeScript, but in a Vite project ends up throwing errors:
[vite] Internal server error: Missing "./assets/a.svg" export in "my-lib" package
The important bits of my package.json:
// package.json
{
"main": "./dist/index.umd.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"files": [
"./dist",
"./assets"
],
// ...rest
}
Are there specific fields to use for non-JS assets in package.json? Is this simply an issue with bundler config?
Minimum reproducible example

Project cannot locate imported d3-graphviz module

The project is located at https://github.com/eric-g-97477/blog-ember-d3 which is a fork of this project.
The output of npm list is:
$ npm list
blog-ember-d3#0.0.0
├── #ember/jquery#0.6.0
├── #ember/optional-features#0.7.0
├── broccoli-asset-rev#3.0.0
├── d3-graphviz#4.1.1
├── d3-selection#3.0.0
├── d3#5.9.2
├── ember-ajax#5.0.0
├── ember-cli-app-version#3.2.0
├── ember-cli-babel#7.7.3
├── ember-cli-dependency-checker#3.1.0
├── ember-cli-eslint#5.1.0
├── ember-cli-htmlbars-inline-precompile#2.1.0
├── ember-cli-htmlbars#3.0.1
├── ember-cli-inject-live-reload#1.10.2
├── ember-cli-sri#2.1.1
├── ember-cli-template-lint#1.0.0-beta.3
├── ember-cli-uglify#2.1.0
├── ember-cli#3.10.1
├── ember-d3#0.5.1
├── ember-data#3.10.0
├── ember-export-application-global#2.0.0
├── ember-load-initializers#2.0.0
├── ember-maybe-import-regenerator#0.1.6
├── ember-qunit#4.4.1
├── ember-resolver#5.1.3
├── ember-source#3.10.0
├── ember-welcome-page#4.0.0
├── eslint-plugin-ember#6.4.1
├── eslint-plugin-node#9.0.1
├── loader.js#4.7.0
└── qunit-dom#0.8.5
I am trying to import by doing:
import { graphviz } from "d3-graphviz";
and that generates the error:
Uncaught Error: Could not find module `d3-graphviz` imported from `blog-ember-d3/libs/donut-chart`
I am sure this is something silly, but I am not sure what has gone wrong.
My goal was to start with a d3 based project that worked and determine how to get d3-graphviz working within it.
If you add ember-auto-import, you should be able to import from d3-graphviz. ember-auto-import sets up webpack and allows things to "just work" from npm, and is standard in all ember apps since ember-cli 3.16
Also, if you're starting a new app, you may want to update ember-cli so you get the latest blueprint.
npm install -g ember-cli#latest

How to structure a simple yarn package for local sharing

I want to create a simple yarn package that can be installed by multiple local yarn projects using yarn add link:/path/to/package. Imagine the package of the package to be shared looks like this
├── package.json
├── tsconfig.json
└── src
├── generated
│   ├── abc.js
│   ├── abc.d.ts
│   └── def.js
│   └── def.d.ts
My goal is that abc and def should be accessible like this
import * from "myPackage/abc"
Currently if I install the above package with yarn add link:/path/to/package then I have to do
import * from "myPackage/src/generated/abc"
I'm a rookie on making typescript packages so forgive me. Can someone point me in the right direction here?
I've tried the suggestion here but it doesn't make a difference.
So it seems I need to set exports and typesVersions in package.json
"exports": {
"./": "./src/generated/"
},
"typesVersions": {
"*": {
"abc": [
"./src/generated/abc.d.ts"
],
"def": [
"./src/generated/def.d.ts"
],
}
},

Is it possible for vscode to auto-import paths in a non-relative way when using app-module-path library?

I'm using app-module-path, for resolving require statements without having to explicitly provide the relative path to the module. But vscode cant recognize the module since it's not relative path. I had tried using jsconfig by following this thread. I created the jsconfig in the root of my project. But the path resolution done by vscode conflicted with app-module-path, since vscode adds a server/ prefix before all paths. What changes should I make to jsconfig.json inorder to make it work with app-module-path?
Context
.
├── jsconfig.json
├── package.json
├── server
│   ├── app.js --------> here I set the app-module-path
│   ├── controllers
│   ├── helpers
│   │   ├── email
│   │   │   ├── fetch.js
│   │   └── urlparser.js
│   └── services
│      └── github
│      └── index.js-> i want import "helpers/email/fetch" from here, not "server/helpers/email/fetch"
└── yarn.lock
With app-module-path set in app.js in base of server, I am able to do the following from server/services/github/index.js:-
const {emailFetch} = require("helpers/email/fetch"); // Note: I cant use the "server/" prefix before "helpers" since app-module-path will lead to error
const {emailFetch} = require("server/helpers/email/fetch"); // This is how vscode auto-imports
This is how I have registered the app-module-path in app.js:-
require("app-module-path").addPath(__dirname);
With the following jsconfig.json, vscode gives intellisense, signature help, go to definition etc even if the path is helpers/email/fetch(without server/ prefix). But how can i make vscode auto-import or fix the require statements, in way such that it doesn't add server prefix before all import statements? Should I use some vscode-extension for doing this job?
{
"compilerOptions": {
"target": "ES6",
"allowSyntheticDefaultImports": true,
"module": "commonjs",
"baseUrl": ".",
"paths": {
"*": [
"*",
"server/*"
]
}
},
"include": [
"server/**/*.js"
]
}
Just posting my answer too over here, so that someone else finds it useful. Currently I have made it to work by changing baseUrl into "server" and removing "server/*" from paths, in jsconfig.json. With this I get correct auto-imports + change in import paths while I move files around too. Do post your answers if you know to do this is in a better way. Cheers!

Versioning of Angular node modules for publishing

While trying to publish Angular components on npm, I am not quite sure which folders and files should be included in the versioning process and which should be in the .gitignore.
I use the Angular CLI for publishing. The main code is in ./projects/nls-ngx-module/src/** and for transpiling I use the native angular command ng build --prod from inside the project folder. Inside dist/ a new folder arrives with the project title. Fine.
After transpiling, another node_modules folder is added to the project folder, which is not ignored by default. It only contains a .cache folder with subfolders and files. And that irritates me, because in other sample projects they do not appear, but they have not been ignored manually in the .gitignore either.
Folder structure
├── ...
├── projects
│   └── nls-ngx-module
│   ├── karma.conf.js
│   ├── ng-package.json
│   ├── ng-package.prod.json
│   ├── package.json
│   ├── src
│   │   ├── lib
│   │   │   ├── ...
│   │   ├── public_api.ts
│   │   └── test.ts
│   ├── tsconfig.lib.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── src
│   ├── app
│   │   ├── ...
│   ├── assets
│   ├── browserslist
│   ├── environments
│   │   ├── ...
│   ├── ...
├── ...
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
package-lock.json
# System Files
.DS_Store
Thumbs.db
Examples taken from:
mrsan22/NgxMatTypeahead
faxemaxe/ngx-cli-lib-demo
No, no modification of the .gitignore file has to be done. The ng build command was executed in the wrong directory.
Do not run ng build --prod or any similiar ng build command outside the root directory of the application. The node_modules folder is only created inside the projects directory when you run the ng build command inside the subfolders of the projects diretory.
Note
The ng build command distributes all necessary dependencies listed inside the package.json. Therefore there has to be a node_modules folder to bundle the built library correctly.

Categories