How can I use an external npm library in my theme to use it in the storefront?
To give an example, how would you include https://www.npmjs.com/package/slick-carousel? This gives JS- and SCSS/CSS-files inside node_modules. I know that there is an included slider with tinyslider that one could use, but the question is more about including and using the external ressoures. I couldn't find any guide/documentation about such a case unfortunately.
Please see the documentation regarding adding NPM dependencies.
You need to import the scss/css within your plugins base.scss (f.e.)
We are copying the css as scss withing install of package.json into the Resources/src/scss-Folder to have it easier to import it.
We found a solution to import styles from NPM packages.
storefront
├── build
│ └── webpack.config.js
├── dist
├── node_modules
│ └── #my-organisation
│ └── my-package
│ └── dist
│ ├── style.css
│ └── script.js
├── package-lock.json
├── package.json
└── src
└── scss
└── base.scss
In your base.scss you now can import the styles like this:
#import "../../node_modules/#my-organisation/my-package/dist/style"
The important part for CSS-Files is, that you don NOT specify the file-extension in the import, otherwise the import-statement will count as a regular CSS-import, see https://sass-lang.com/documentation/at-rules/import#importing-css
In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS #import.
Related
Good morning,
I am facing an odd issue in my VSC editor with one file.
If I open just my utils/dist.ts file, I get errors in some nodejs keywords, but it is another story if I open another file which uses the exact keywords as in the examples routes/api/distributions.ts.
It happens in every file in my utils/ folder.
tree -d
.
├── dist
│ ├── serversSetup
│ └── templates
│ ├── cloud-init
│ └── pxe
├── middlewares
├── models
├── prisma
│ └── migrations
│ └── 20230215131049_init
├── routes
│ └── api
└── utils
14 directories
I have tried several things:
Reloading the Visual Studio Window.
Deleting and reinstalling node_modules/.
Updating "#types/node" from "18.0.0" to "18.13.0".
Updating Visual Studio Code.
I want TS to behave generally in all the folders of my source code.
I am reading other people's code and found extensions.py in their package.
I can see the modules imported in the extensions.py are imported in init.py as well.
I could not find how the extensions.py works with init.py and in what situation you need to use the extensions.py.
Could anyone give me some explaination or provide some link that explain it?
In init.py
from flask_app.extensions import cors, guard
In extension.py
from flask_praetorian import Praetorian
cors = CORS()
guard = Praetorian()
According to Python’s package tutorial this is the minimal structure:
packaging_tutorial/
├── LICENSE
├── pyproject.toml
├── README.md
├── setup.cfg
├── src/
│ └── example_package/
│ ├── __init__.py
│ └── example.py
└── tests/
Seems as its just a backup for installing requirements, or for more readability. Maybe provide where you found extensions.py, and I can take a deeper look.
You could also dig deeper into docs and see exactly what flask-praetorian does.
I think It's just a backup for installing things like requirements.
I have just published a new TypeScript-based module to the NPM registry, ooafs. However, when I try to install it and import it in another TypeScript project, VSCode gives me the following error on the import statement: Cannot find module 'ooafs'.ts(2307).
This module's source files are compiled to JavaScript to a dist/ folder and definitions (.d.ts) are also generated.
Here's the tree of the published module (the one we download when we npm install):
.
├── dist
│ ├── Entry.d.ts
│ ├── EntryFilter.d.ts
│ ├── EntryFilter.js
│ ├── Entry.js
│ ├── EntryType.d.ts
│ ├── EntryType.js
│ ├── FSTypings.d.ts
│ ├── FSTypings.js
│ ├── index.d.ts
│ └── index.js
├── LICENSE
├── package.json
└── README.md
The package.json does contain the following entries:
{
"main": "dist/index.js",
"types": "dist/index.d.ts",
...
}
Because the module works normally on Runkit (pure JS), I assume the only problem I have is related to TypeScript, and it's not the first time TypeScript tells me a module doesn't exist when missing declaration files are the only problem.
Am I missing a step in the compilation process ?
Are my package.json properties wrong ?
If you need to see more code, the Github link is at the beginning of the question, and the published module structure can be found here: https://unpkg.com/ooafs#0.1.2/dist/.
Actually, the problem didn't come from my module (ooafs). It was a problem with the tsconfig.json of the project I was using the module in: The module property must be set to commonjs apparently.
Very late edit:
Also, I highly recommend setting esModuleInterop to true which allows you to import non-es6 modules in a more natural manner.
The answer is not the fix, and is certainly not ideal when you have to use top-level awaits (which don't work on commonjs).
You want to make sure your import path is the final file that node will try and load. So you cannot rely on folders resolving to folder/index.js and you cannot rely on giving file names without extensions (give the ".js" extension)
My understanding is that Bazel expects projects to be under a monorepo with a WORKSPACE file at the top-level and BUILD files in every project:
Repo
├── ProjectA
│ └── BUILD
├── ProjectB
│ └── BUILD
└── WORKSPACE
However, going through the Bazel NodeJS rules documentation, it seems to suggest that every project should have it's own WORKSPACE file where it defines its dependencies. i.e. ...
Repo
├── ProjectA
│ ├── BUILD
│ └── WORKSPACE
└── ProjectB
├── BUILD
└── WORKSPACE
This looks similar to a multi-repo with every project referencing other projects as an external dependency, which seemed okay to me, until I realized that for external dependencies, Bazel requires all transitive dependencies to be specified in the WORKSPACE file for every package, which is definitely not ideal.
What's the easiest way to use Bazel with NodeJS projects, with some projects possibly written in other languages? Also, is there an example somewhere for Bazel being used in a multi-repo setting?
Thanks!
I think the 2 possible options are in fact
Repo
├── MyProject
│ └── BUILD
├── third_party
│ └── ProjectB
│ └─ BUILD
└── WORKSPACE
or
Repo
├── MyProject
│ └── BUILD
└── WORKSPACE
where in the second case WORKSPACE references ProjectB with npm_install rule as defined in https://github.com/bazelbuild/rules_nodejs#using-bazel-managed-dependencies
I'm still trying to figure this out myself, but what I've gathered so far is that there is only one WORKSPACE file at the root of the repo. You need to have a package.json file (probably at the root) containing all the dependencies used in the whole repo then call npm_install or yarn_install in the WORKSPACE file to download them all.
Then your package BUILD file can reference a dependency with #npm//some_package as in:
filegroup(
name = 'sources',
srcs = ['index.js'],
)
npm_package(
name = 'pkg',
srcs = [ 'package.json'],
deps = [
':sources'
'#npm//lodash'
],
)
There are a few different dependency edge cases I haven't figured out yet so this may not be perfectly correct. Good luck.
I want to create a library in Typescript that I can share via npm. Specifically, I want to use webpack to generate a js bundle along with a definition file to share the types with the js. So I'd have a tree of files like:
├── lib
│ ├── lib.d.ts
│ └── lib.min.js
├── test
...
├── ts
│ ├── errors
│ │ ├── CannotModifyAlteredObject.ts
│ ├── Lib.ts
│ ├── PostProcessors.ts
│ ├── Serializers.ts
├── tsconfig.json
├── typings.json
├── LICENSE
├── package.json
├── README.md
└── webpack.lib.config.js
And all the types exported by ts/Lib.ts would be exported to a single .d.ts in the lib directory to sit next to the js bundle.
I've looked at the following questions/sources:
Writing npm modules in typescript
How to create a typescript library (and the question it duplicates)
This unanswered question
The offical typescript guide to creating packages
This example typescript library project
And another SO question
However, none of these provide an example using webpack. Being able to bundle everything you need to use the library (apart from the nodejs runtime) into a single file is pretty important for my use case, so webpack fits this role well. I'd like to be able to generate a .d.ts file that maps to what webpack creates. However, I want to avoid creating the .d.ts file manually - it should be possible to automatically extract the types without having manually created .d.ts files get out of sync with my source code. Is there a way of doing this?