Develop Reference

Vite: Building a SASS file as it is written

I am building a library using Vite/Vue3/Quasar and I would like to export a quasar-variables.sass file as it is written without it being compiled or anything. Just straight SASS file that I can import to my other projects.
Is this possible with Vite?
Here is my vite.config.js:
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { quasar, transformAssetUrls } from '#quasar/vite-plugin';
import eslintPlugin from 'vite-plugin-eslint';
import vue from '#vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'AvvinueClowder',
fileName: (format) => `avvinue-clowder.${format}.js`,
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
plugins: [
vue({
template: { transformAssetUrls },
}),
eslintPlugin(),
quasar({
sassVariables: 'src/style/_quasar-variables.sass',
}),
],
resolve: {
alias: {
'#': resolve(__dirname, './src'),
},
},
});
And part of my package.json:
"version": "2.0.9",
"files": [
"dist"
],
"main": "./dist/avvinue-clowder.umd.js",
"module": "./dist/avvinue-clowder.es.js",
"exports": {
".": {
"import": "./dist/avvinue-clowder.es.js",
"require": "./dist/avvinue-clowder.umd.js"
}
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
And this is what gets spit out in the dist folder:
Right now everything gets converted to simple CSS and the variables seem to get lost, which is forcing me to declare multiple variable files in multiple repositories, instead of just importing it from my NPM library I'm creating.
Thank you!

For Vite specifically, its easier if you just create a /public folder in your root and add files/assets that shouldn't be altered by the build script.

You can use the rollup copy plugin to copy your file into dist folder
import copy from 'rollup-plugin-copy'
plugins: [
copy({
targets: [
{ src: 'src/style/_quasar-variables.sass', dest: 'dist/style' }
]
})
]
Another way, you can just add your file to npm by excluding it from .npmignore file
/src <- This line prevents uploading the whole src folder to npm
!src/style/_quasar-variables.sass <- This will add your file to npm package

How to conditional exports from package.json

I have section exports in my package.json:
"exports": {
"import": "./dist/a.es.js",
"require": "./dist/b.umd.js"
},
But for development, I would like to have different path:
"exports": {
"DEV": {
"import": "./src/a.es.js", // <---------- SRC
"require": "./src/b.umd.js" , // <---------- SRC
},
"PROD": {
"import": "./dist/a.es.js",
"require": "./dist/b.umd.js"
}
},
Is there any way how to use some env variable?

I was able to solve this using this setup
In the package that my program imports:
{
"name": "my-special-node-package",
"version": "1.0.0",
"license": "MIT",
"exports": {
".": {
"production": {
"require": "./prod/index.cjs.js",
"import": "./prod/index.esm.js"
},
"default": {
"require": "./index.cjs.js",
"import": "./index.esm.js"
}
},
}
}
And then in my program:
// index.js
const myPkg = require('my-special-node-package')
On production I use node --conditions=production index.js to execute the node program. Otherwise I use node index.js in dev mode.
Also, since I'm using TypeScript and since TypeScript is only really used during development time, I was able to change the default require/import values to point to a index.ts file.
{
// ....
"exports": {
".": {
"production": {
"require": "./dist/index.cjs.js",
"import": "./dist/index.esm.js"
},
"default": "./index.ts"
},
}
}
This setup allows for my local development to always TS files directly and not rely on each package to be built whenever it changes.

babel-plugin-module-resolver adding extra ../ to path

While I am aware that Babel is capable of transpiling TypeScript itself, I've had enough weird issues I'd like to first transpile TypeScript->JS and then run Babel on that.
I've got my tsconfig.json files working as expected. When I compile my TypeScript (from ./src folder relative to babel.config.json's path), it outputs to a ./build folder. I have Babel set to take what's in the ./build folder and output to the ./dist folder.
The output of TSC shows import {bar} from 'foo' and import {thing} from 'foo/util', as expected. But Babel's output looks like ../../../libfoo/libfoo.js when it should be ../../libfoo/libfoo.js
No matter what I try with root/cwd, I can't seem to get that extra ../ to disappear. I've managed to make it go away a couple times, but then I rebuild without changing the babel config, and it comes back.
My babel.config.json currently looks like this:
{
"presets": [
["#babel/preset-env", {"targets": {
"node": true,
"electron": "80"
}}],
["#babel/preset-typescript", { "onlyRemoveTypeImports": true }]
],
"plugins": [
["babel-plugin-module-resolver", {
"alias": {
"^foo/(.+)": "./libfoo/\\1.js",
"^foo$": "./libfoo/libfoo.js"
}
}],
["#babel/plugin-transform-modules-umd"],
["#babel/plugin-transform-typescript", {
"allowNamespaces": true,
"allowDeclareFields": true,
"onlyRemoveTypeImports": true
}],
["#babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }],
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-proposal-do-expressions",
"#babel/plugin-proposal-logical-assignment-operators",
"#babel/plugin-proposal-partial-application",
["#babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-throw-expressions",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-function-bind"
],
"sourceMaps": true
}

Well, I found a solution that doesn't really fix the problem but makes it works.
My files structure is something like this:
|-dist
|-src
|-db
|-connect
|-index.ts
|-index.ts
|-.babelrc
When babel compiles the code, the import of db/connect in src/index.ts, go from this:
import ... from "db/connect"
to this:
var _connect = require("../db/connect");
To resolve this, I simply add /dist to the paths in .babelrc
before:
[
"module-resolver",
{
"root": ["./"], # or ["src"] or "src" or ["./src"] or "./src" or any way you can imagine
"alias": {
"db": "./db",
}
}
}
]
after:
[
"module-resolver",
{
"alias": {
"db": "./dist/db",
}
}
}
]
And the import is now:
var _connect = require("../dist/db/connect");
As you said, the root doesn't affect the require path, so I just removed it.
This doesn't fix the problem, but makes it work.
Hope it helps, good luck! :)

Why is <reference path="..." /> required when Importing dojox/gfx with TypeScript?

We have a TypeScript project where we need to uses Dojo's createSurface. However, we unexpectedly need to include <reference path="..."/> as shown below.
/// <reference path="node_modules/#types/dojo/dojox.gfx.d.ts"/>
import gfx1 = require("dojox/gfx");
import gfx2 from "dojox/gfx";
import * as gfx3 from "dojox/gfx";
import { createSurface } from "dojox/gfx";
const el = new HTMLElement();
gfx1.createSurface(el, 100, 100); // require
gfx2.createSurface(el, 100, 100); // from
gfx3.createSurface(el, 100, 100); // star
createSurface(el, 100, 100); // single method
I would have expected to not require <reference path="..."/> but without it TypeScript complains that it cannot find the module for each require/import statement shown.
Our package.json is
{
"name": "react-dojo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"build": "tsc"
},
"license": "MIT",
"devDependencies": {},
"dependencies": {
"#types/dojo": "1.9.40",
"#types/react": "^16.3.17",
"#types/react-dom": "^16.0.6",
"dojo": "^1.13.0",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"typescript": "2.9.1"
}
}
Our tsconfig.json is
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true
},
"exclude": ["dist", "node_modules"]
}
How do (can) we import Dojox modules without <reference path=""/>?
Update 04 JUN 2018
Upon further inspection of dojo's type definitions I found that I can dojox without the <reference path="..."/> like so...
import * as dojox from "dojo/main.dojox";
dojox.gfx.createSurface(el, 100, 100);
// or
import { gfx } from "dojo/main.dojox";
gfx.createSurface(el, 100, 100);
This is because #types/dojo/index.d.ts exports the following module.
declare module "dojo/main.dojox" {
var exp: dojo.main.dojox
export=exp;
}
However, the dojox interface in index.d.ts defines gfx as an Object. Typescript then warns that
Property 'createSurface' does not exist on type 'dojox'
As a test I created a new project with only the following dependencies.
"dependencies": {
"#types/dojo": "1.9.40",
"typescript": "2.9.1"
}
I then changed gfx: Object to gfx: dojox.gfx; within index.d.ts. This seemed to resolve all issues for this test project.
I attempted to do the same to my original project but TypeScript warns that
node_modules/#types/dojo/index.d.ts(26014,24): error TS2694: Namespace 'dojox' has no exported member 'gfx'.
I have verified that the contents of node_modules/#types/dojo are identical, and both projects use the same TypeScript version. The tsconfig.json files are the same as well.
Why would one project see the exported member and another not?

How load Emberjs 2.0 with jspm and systemjs

I am try use Ember 2.0 and have next files
config.js
System.config({
"baseURL": "/static/js",
"transpiler": "traceur",
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js"
}
});
System.config({
"map": {
"ember": "github:components/ember#2.0.0",
"traceur": "github:jmcriffey/bower-traceur#0.0.88",
"traceur-runtime": "github:jmcriffey/bower-traceur-runtime#0.0.88",
"github:components/ember#2.0.0": {
"jquery": "github:components/jquery#2.1.4",
"handlebars": "github:components/handlebars#1.3.0"
}
}
});
app.js
import Ember from "ember";
let App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true,
});
and index.html
<script src="{% static "js/jspm_packages/system.js" %}"></script>
<script src="{% static "js/config.js" %}"></script>
<script>
System.import('app');
</script>
aftre load i have next error
Uncaught (in promise) Error: Cannot read property 'Ember' of undefined
Error loading http://localhost:9090/static/js/app.js
at http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:16:38
at http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:97:11
at execute (http://localhost:9090/static/js/jspm_packages/github/components/ember#2.0.0/ember.js!transpiled:25603:9)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20821)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
at m (http://localhost:9090/static/js/jspm_packages/system.js:4:20756)
at Object.Promise.all.then.execute (http://localhost:9090/static/js/jspm_packages/system.js:4:23421)
at b (http://localhost:9090/static/js/jspm_packages/system.js:4:7874)
at S (http://localhost:9090/static/js/jspm_packages/system.js:4:8253)
at p (http://localhost:9090/static/js/jspm_packages/system.js:4:6131)
if load scripts without systemjs and jspm always work. but want use jspm and systemjs :)
Before i use ember 1.13 and with config worked. I think problem with config jquery

It looks like the package for Ember is not always jspm-compatible. I always use the following override in my package.json:
"jspm": {
"overrides": {
"github:components/ember#2.0.0": {
"main": "ember.debug",
"files": [
"ember.prod.js",
"ember.debug.js"
],
"dependencies": {
"jquery": "github:components/jquery#^2.1.3"
},
"shim": {
"ember.prod": {
"deps": [
"jquery"
],
"exports": "Ember"
},
"ember.debug": {
"deps": [
"jquery"
],
"exports": "Ember"
}
}
}
}
}
It dictates jspm to install only prod and debug versions of Ember and describes all dependencies and exports properly. If you use it, you need to run jspm install again after you added it to your package.json.
You may encounter another problem with htmlbars templates. I have got a plugin to solve that: https://github.com/n-fuse/plugin-ember-hbs:
jspm install hbs=github:n-fuse/plugin-ember-hbs#2.0.0
should allow importing hbs templates w/o the need to add a compiler in dependencies.
See also a starter project I created: https://github.com/OrKoN/jspm-ember-playground