teambit / bit.envs

DEPRECATED - Bit compilers and testers were moved to https://github.com/teambit/envs

Deprecated. Compilers and testers for Bit are now in https://github.com/teambit/envs

Bit compilers, transpilers and testers.

Bit helps you easily share many components. To save the overhead of separately defining build and test steps for every component, bit lets you use reusable extensions as compilers and testers for the components in your workspace.

The component environment is a unique type of an extension that implements specific APIs to support building (compiling/transpiling) components and running unit tests.

This repository contains officially supported bit compilers and testers for the public use of the developer community.

All issues and PRs re Bit compilers and testers should be opened in this repository.

Compilers and testers on bit.dev

All bit compilers and testers are available and can be used from this bit.dev collection.

Bit compilers and transpilers

• React
• Vue
• TypeScript
• Babel
• Flow
• React-TypeScript
• Preact
• Webpack
• Webpack-CSS-Modules

See: "Which Bit compiler should I use?"

How to use a Bit compiler

See full documentation on the usage of bit compilers.

Bit uses a global compiler configuration for a workspace, which propagates to each component tracks in that workspace. Therefore, can import a single compiler for all the components in your project.

Example
Use the --compiler flag when importing a bit compiler.

$ bit import bit.envs/compilers/babel --compiler
the following component environments were installed
- bit.envs/compilers/[email protected]

Develop your own Bit compiler/tester

Since there are so many build tools and configurations, some of you might discover that the existing compilers don’t fit their requirements. Compilers are bit components, and anyone can develop a new compiler.

See developing bit compilers.

Contributing

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

Pull Requests

We actively welcome your pull requests.

1. Fork the repo and create your branch from master.
2. If you've added code that should be tested, add tests.
3. Ensure the test suite passes.
4. Add your change to the CHANGELOG.md file at the [unreleased] section.

Running this project

1. clone
2. make sure the local scope name is different then bit.envs to prevent collision with bit.dev scope name. (either change the name inside .git/bit/scope.json or make sure to clone to a folder other than bit.envs (the default scope name is the same as the dir name))
3. bit import (it takes some time)
4. npm i
5. bit import --merge
6. bit link
7. validate by running bit status and make sure everything is ok

License

By contributing to Bit, you agree that your contributions will be licensed under its Apache2 license.

bit.envs's Issues

Typescript compiler to emit declaration files

Hello,

I am using Bit to separate several modules I have written in Typescript. So far, so good, but there is something that I find its missing.

When you build the Typescript code, there are no declaration files emitted (.d.ts files). This means that when you are consuming a Typescript bundled code with Bit, there are no hints or suggestions on the code (very useful in editors like VSCode), which means one has to go to the main documentation (first create one) and see how to use the code.

Please, add a way to emit .d.ts files when compiling Typescript code

wrong distMainFile in ts compiler

See full explain and re-produce here: teambit/bit#1978

copy the description by @davidfirst from the mentioned issue:

bit.envs/compilers/[email protected].
It randomly returns a wrong distMainFile. Sometimes index.js, sometimes index.js.map.

Looking at the compiler code, the issue is with this function:

export function findMainFile(context: CompilationContext, dists: Vinyl[]) {
    const getNameOfFile = (val:string, split:string) => val.split(split)[0]
    const sourceFileName = getNameOfFile(context.main, '.ts')
    const res = dists.find((val)=> {
        return  sourceFileName === getNameOfFile(val.basename, '.js')
    })
    return  (res || {relative:''}).relative
}

it splits the filename by '.js' and compare to the basename, so both names (index.js and index.js.map) fit the criteria.

Vue bundler need babel-runtime when consume the component

I exported this component https://bit.dev/joshk/epic-spinners-final-1/radar-spinner from this project https://github.com/epicmaxco/epic-spinners/tree/v1.1.0 and when I use it in a new vue project, I get this error:

This dependency was not found:

* babel-runtime/core-js/object/assign in ./node_modules/@bit/joshk.epic-spinners-final-1.radar-spinner/dist/main.js

To install it, you can run: npm install --save babel-runtime/core-js/object/assign

After I install babel-runtime everything is working.
If I use the radar-spinner from the epic-spinners library I don't get this error.

The problem is that Object.assign function is replaced by require("babel-runtime/core-js/object/assign").
So I think is a problem with the webpack config.
I use this bundler https://bit.dev/bit/envs/bundlers/vue/~code?version=2.5.1

[React-TypeScript] the main of the package points to ts file

Just used the Bit for a first time to export a couple of React Hooks we have. Hooks are not exactly components, but I don't see why it shouldn't work :) Problem is that generated package.json has main field pointing to the source .ts file instead of the one from dist.

https://bit.dev/speedlo/hooks/use-async-effect/~code

To properly consume such hook we would have to do the following and that's fairly ugly :)

import { useAsyncEffect } from "@bit/speedlo.hooks.use-async-effect/dist/use-async-effect/useAsyncEffect";

Is it some configuration I am missing or why is that happening?

Unable to install the latest version of angular

Just getting started with bit and was trying to setup angular env, every time I try to install I end with version 0.1.9 which is not working for me.

    bit import bit.envs/angular --compiler
the following component environments were installed
- bit.envs/[email protected]  [deprecated]

    bit import bit.envs/[email protected] --compiler
error: component "bit.envs/[email protected]" was not found

I have even tried clearing cache, incase by repo is pointing towards an older version with bit clear-cache command but no luck with that also

When I try to build with this version, I end up with this error

    bit build
building components...
Command failed: node /xxxxxxx/.bit/components/angular/bit.envs/0.1.9/node_modules/ng-packagr/cli/main.js -p ng-package.json -c tsconfig.json
error TS6046: Argument for '--lib' option must be: 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.string', 'es2019.symbol', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint'.


Building Angular Package

Kind of stuck here, thanks in advance

Jest giving error in test - collection.reduce is not a function

Hi

I'm getting this problem when trying to use (bit.envs/testers/jest).

When I run using this script

all test run good but when I try the "bit test" I get a error in my spec file with the error message

`\node_modules\jest-haste-map\build\crawlers\node.js:36
names.forEach(file => {
^

TypeError: Cannot read property 'forEach' of undefined`

my spec file is

any idea of what's missing?

Web Components - Bit Lit-Element Compiler

It could be we just need a typescript compiler but we should have support for working with lit-html and lit-element. The lit community seems like the biggest web components group out there and I think it's worth having.
https://lit-element.polymer-project.org/
https://lit-html.polymer-project.org/

CSS files are not copied in typescript compiler 3.0.32

Regression from 3.0.31.
If CSS files exist, they are not being copied over to the dist files.

typescript v3.0.16 dependency causes issue with react-typescript compiler v3.0.19

The compiler is the only thing I changed in my project (bit import bit.envs/compilers/react-typescript -c).
If I change the version back to 3.0.17 and lower in bit.json, it works.

Jest test command line fails when the project's path contains spaces

Hi everyone !

OK, looks like i've found the place to open this issue and a submit a PR.

After adding jest to my test envs and trying a bit test, i've got the following error :

15:30 $ bit test
utils/object-paths
tests failed
file: src/utils/object-paths/index.spec.js

❌   Jest failure
    Command failed: "/usr/local/bin/node" /Users/christophe/Workspace/My Projects/bit-boilerplate/.bit/components/testers/jest/bit.envs/0.0.34/node_modules/jest/bin/jest.js /Users/christophe/Workspace/My Projects/bit-boilerplate/src/utils/object-paths/index.spec.js --rootDir=/Users/christophe/Workspace/My Projects/bit-boilerplate/src/utils/object-paths --config=/Users/christophe/Workspace/My Projects/bit-boilerplate/.bit/components/testers/jest/bit.envs/0.0.34/dist/jest.config.js --json --outputFile="index-results.json"
internal/modules/cjs/loader.js:605
    throw err;
    ^

Error: Cannot find module '/Users/christophe/Workspace/My'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:775:12)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)
 `"/usr/local/bin/node" /Users/christophe/Workspace/My Projects/bit-boilerplate/.bit/components/testers/jest/bit.envs/0.0.34/node_modules/jest/bin/jest.js /Users/christophe/Workspace/My Projects/bit-boilerplate/src/utils/object-paths/index.spec.js --rootDir=/Users/christophe/Workspace/My Projects/bit-boilerplate/src/utils/object-paths --config=/Users/christophe/Workspace/My Projects/bit-boilerplate/.bit/components/testers/jest/bit.envs/0.0.34/dist/jest.config.js --json --outputFile="index-results.json"` (exited with error code 1)

Which is obviously due to the fact the path to my project's folder contains a space...
The fix is obvious : just surround every path from the command line with "

can't handle bundler for typescript react .tsx file

Error: You may need an appropriate loader to handle this file type.

Create a Vue typescript compiler

Vue 3 has a TS option. Vue-typescript compiler should support it.

Web Components - Bit Svelte Compiler

https://svelte.dev/ is another dominant group in the web components community. I think they can benefit from a tool like bit.

ts compiler - copy assets / non compiled files to dist folder

I think it's always better to copy files the compiler doesn't know how to handle as is to the dist files.
Most of the compilers already do this.
This will prevent bugs arrised from accessing assets files of the component for example (since they won't exist in the dist folder of the component).

Typescript version is a year and a half out of date

My project uses the latest version of typescript. I can't tag my component because the syntax is "invalid". Apparently --force doesn't skip syntax validation. tsc runs fine.

I thought updating the version of typescript in this repo would fix the issue, but it did not, or I did it wrong.

ts compiler - missing the base prop in dist's vinyl files

With the recent version of the ts compiler, the base prop of the dists is not set.
It's important to set it since bit uses it internally for path calculations.

Can't find stylesheet to import error on dependencies components

I tried to export ngx-charts project and get an error on SCSS file when I build a component A that have component B as a dependency and component B have an SCSS file inside.

Setup to reproduce

1. clone this project https://github.com/swimlane/ngx-charts.
2. run checkout git checkout tags/12.0.1.
3. run npm i.
4. run bit init.
5. do the following change:

in file src/common/axes/y-axis-ticks.component.ts change import roundedReact to `import { roundedRect } from '../shape.helper';`
in file src/utils/types.ts change return in isDate to `return Object.prototype.toString.call(value) === '[object Date]';`

6. run bit status, should be ok.
7. run this bit add commands:

bit add src/*/ -e 'src/{PARENT}/*.spec.ts,src/common,src/models,src/utils' -m 'src/{PARENT}/index.ts'
bit add src/utils/* -n utils 
bit add src/models/* -n models
bit add src/events.ts

bit add src/common/*/ -n common -e 'src/common/*/*.spec.ts,src/common/area.component.ts'
bit add src/common/*.ts -n common -e 'src/common/*.spec.ts,src/common/index.ts'
bit add src/common/base-chart.component.scss -n common/style

8. copy this to bit objects(I added permission to Doron for the compiler):

"bit": {
    "env": {
      "compiler": "joshk.ngx-charts-compiler/compilers/[email protected]"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm",
    "overrides": {
      "*": {
        "dependencies": {},
        "peerDependencies": {
          "d3": "^4.10.2",
          "@types/d3": "^5.7.2"
        }
      },
      "common/style/*": {
        "env": {
          "compiler": "-"
        }
      }
    }
  }

9. run this build command: NG_DEBUG=true bit build polar-chart

And you will get this error:

error: bit failed to build polar-chart with the following exception:
Command failed: node /Users/yoshuakuttler/Documents/bit/testingAngularProjects/ngx-charts/.git/bit/components/compilers/angular/joshk.ngx-charts-compiler/0.2.2/node_modules/ng-packagr/cli/main.js -p ng-package.json -c tsconfig.json
ERROR: Can't find stylesheet to import.
  ╷
1 │ @import '~@bit/pie-chart/dist/pie-chart/pie-chart/pie-chart.component';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  pie-chart/pie-chart.component.scss 1:9  root stylesheet

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@bit/polar-chart'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc

• bit version: 14.2.6-dev.3
• node version: v10.16.0

Jest tester is not working when component have styling files

I have a project written in react and typescript, and tested with jest tester and is not working.
This is the error I get:

Test suite failed to run 
      ● Test suite failed to run

    /workspace/environment/1117b971-f18d-4fdb-a341-f715b3fb6f08/dist/components/Alert/alert.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import '../../styles/variables.scss';
                                                                                             ^
    
    SyntaxError: Invalid or unexpected token

      22 | Object.defineProperty(exports, "__esModule", { value: true });
      23 | var react_1 = __importStar(require("react"));
    > 24 | require("./alert.scss");
      25 | var Alert = /** @class */ (function (_super) {
      26 |     __extends(Alert, _super);
      27 |     function Alert() {
      
      at ScriptTransformer._transformAndBuildScript (../../../../../components/testers/jest/bit.envs/22.4.3/node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (alert.js:24:1)
      at Object.<anonymous> (index.js:3:15)

STR:

• clone this project https://github.com/JoshK2/create-react-components-library.
• run this bit add command: bit add src/assets/* -n assests && bit add src/components/*/ -t 'src/components/{PARENT}/*test.tsx' && bit add src/styles/* -n styles && bit add src/utils/*/ -t 'src/utils/{PARENT}/*test.ts'
• run bit status, should be ok.
• impor this compiler bit.envs/compilers/[email protected]
• import the tester bit.envs/testers/[email protected]
• run bit tag like this if you want to see the error in the cloud: bit tag -a --skip-tests

and this is my jest.config.js:

module.exports = {
    preset: 'ts-jest',
    snapshotSerializers: ['enzyme-to-json/serializer'],
    testEnvironment: 'node',
    transform: {
        '^.+\\.tsx?$': 'ts-jest'
    },
    testRegex: '/src/.*\\.test.(ts|tsx)$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    setupFiles: ['<rootDir>/setupTests.ts'],
    collectCoverage: true,
    collectCoverageFrom: ['src/**/*.{ts,tsx}', '!src/index.ts', '!**/node_modules/**'],
    moduleNameMapper: {
        '^.+\\.(css|less|scss)$': 'identity-obj-proxy'
    }
};

remove imports to babel presets/plugins

There are a lot of imports in different compilers to different babel plugins/presets.
The reason beyond this imports is to make sure they are in the dependencies graph so they will be installed upon import the compiler.
Now when we have the overrides feature, we can use it to enforce the dependencies and remove the redundant import statements.

[React-TypeScript] Cannot find module of dependent bit

Rather strange error. I made a repo for easy reproduction: https://github.com/FredyC/bit-ts-react-test.

@qballer Can you please have a look?

jest tester - normalizeResults not defined

Hi,

When I try to use the jest tester - I get the error ❌ Jest failure - NaNms normalizeResults is not defined. Is there a problem with version 0.0.26, or am I doing something wrong?

Thanks

A more readable way to struct the dist file path

I would change this:
https://github.com/teambit/bit.envs/blob/master/components/compilers/typescript/ts.js#L102
path: path.join(context.name, file.split(path.join(capsuleDir, 'dist'))[1]),
to something like:
path.join(context.name, file.relative(path.join(capsuleDir, 'dist'), file),

(I didn't test the exact line, so need to verify I don't have a mistake here).
This way using relative is more readable than using split and access [1].

Latest react-typescript compiler cannot build an svg image

I have tried [email protected] and got this error.
images/logo is an svg image that is imported by atoms/brand-logo.

C:\Users\[user]\src\[user]\[project]\[sub_project]>bit tag --all 0.1.0
successfully installed the bit.envs/compilers/[email protected] compiler
error: bit failed to build atoms/brand-logo with the following exception:
error: bit failed to build images/logo with the following exception:
Command failed with exit code 2 (Unknown system error -2): C:\Users\[user]\src\[user]\[project]\[sub_project]\.git\bit\components\compilers\react-typescript\bit.envs\3.0.21\components\.dependencies\compilers\typescript\bit.envs\3.0.25\node_modules\typescript\bin\tsc -d
Error: Command failed with exit code 2 (Unknown system error -2): C:\Users\[user]\src\[user]\[project]\[sub_project]\.git\bit\components\compilers\react-typescript\bit.envs\3.0.21\components\.dependencies\compilers\typescript\bit.envs\3.0.25\node_modules\typescript\bin\tsc -d   
    at makeError (C:\Users\[user]\src\[user]\[project]\[sub_project]\.git\bit\components\compilers\react-typescript\bit.envs\3.0.21\components\.dependencies\compilers\typescript\bit.envs\3.0.25\node_modules\execa\lib\error.js:58:11)
    at handlePromise (C:\Users\[user]\src\[user]\[project]\[sub_project]\.git\bit\components\compilers\react-typescript\bit.envs\3.0.21\components\.dependencies\compilers\typescript\bit.envs\3.0.25\node_modules\execa\index.js:112:26)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)

ExternalBuildErrors
    at C:\Users\[user]\AppData\Roaming\nvm\v12.4.0\node_modules\bit-bin\dist\consumer\component-ops\build-component.js:707:19

I have also tested [email protected] and it worked.

C:\Users\[user]\src\[user]\[project]\[sub_project]>bit tag --all 0.1.0
successfully installed the bit.envs/compilers/[email protected] compiler
(node:26828) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability 
issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.  
11 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)

new components
(first version for components)
... // new component list

Is this a bug or an expected error? I will post additional info if needed.

get rid of adding context.name (comp name) to the dist path

Adding the comp name directly by the compiler to the dist path is error-prone.
It will make bit's life harder to map the src files to the dist files since their relative path will be different.
This will make some internal features ("magic") of bit to not work properly.
I'm talking about this line:
https://github.com/teambit/bit.envs/blob/master/components/compilers/typescript/ts.js#L102

Wrong link to dependencies component in Angular compiler

I tried to export this project to bit:
https://github.com/swimlane/ngx-charts
And I get an error that the files do not exist.

Steps to Reproduce

1. clone the project
2. run checkout git checkout tags/12.0.1
3. run npm i
4. change the following:

in file src/common/axes/y-axis-ticks.component.ts change import roundedReact to `import { roundedRect } from '../shape.helper';`
in file src/utils/types.ts change return in isDate to `return Object.prototype.toString.call(value) === '[object Date]';`

5. run bit add commands:

bit add src/*/ -e 'src/{PARENT}/*.spec.ts,src/common,src/models,src/utils' -m 'src/{PARENT}/index.ts'
bit add src/utils/* -n utils 
bit add src/models/* -n models
bit add src/events.ts -n internal

bit add src/common/*/ -n common -e 'src/common/*/*.spec.ts'
bit add src/common/area.component.ts -n common 
bit add src/common/base-chart.component.ts src/common/base-chart.component.scss -m 'base-chart.component.ts' -i common/base-chart
bit add src/common/chart-common.module.ts -n common
bit add src/common/circle-series.component.ts -n common
bit add src/common/circle.component.ts -n common
bit add src/common/color.helper.ts -n common 
bit add src/common/domain.helper.ts -n common
bit add src/common/grid-layout.helper.ts -n common
bit add src/common/grid-panel-series.component.ts -n common
bit add src/common/grid-panel.component.ts -n common
bit add src/common/label.helper.ts -n common 
bit add src/common/shape.helper.ts -n common
bit add src/common/svg-linear-gradient.component.ts -n common
bit add src/common/svg-radial-gradient.component.ts -n common
bit add src/common/tick-format.helper.ts -n common    
bit add src/common/tooltip-area.component.ts -n common
bit add src/common/trim-label.helper.ts -n common
bit add src/common/view-dimensions.helper.ts -n common

6. bit status should be ok.
7. fork the angular compiler and set this config in bit object in package.json file.

"bit": {
    "env": {
      "compiler": {
        "bit.envs/compilers/[email protected]": {
          "options": {
            "file": "{PATH TO THE COMPILER}/components/compilers/angular/dist/angular.js"
          }
        }
      }
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm",
    "overrides": {
      "*": {
        "dependencies": {
          
        },
        "peerDependencies": {
          "d3": "^4.10.2",
          "@types/d3": "^5.7.2"
        }
      }
    }
  }

8. change the tsconfig.json of the compiler to this:

{
    "angularCompilerOptions": {
        "annotateForClosureCompiler": false,
        "skipTemplateCodegen": true,
        "strictMetadataEmit": false,
        "fullTemplateTypeCheck": false,
        "enableResourceInlining": true
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "outDir": "dist",
        "declaration": true,
        "inlineSourceMap": true,
        "inlineSources": true,
        "skipLibCheck": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": false,
        "preserveSymlinks": true,
        "lib": [
            "dom",
            "es2018"
        ]
    },
    "exclude": [
        "node_modules",
        "dist",
        "**/*.ngfactory.ts",
        "**/*.shim.ts",
        "**/*.spec.ts"
    ]
}

9. run this build command to see the error:
   NG_DEBUG=true bit build area-chart

screenshot of wrong path:

screenshot after I change manually the path to the component:

Vue compiler fails when working ( Vue cli 3?)

Installing a component and then importing it raises an error:

on serve - the following errors exist:

'define' is not defined (no-undef) at components/product-list/dist/main.js:1:123:
and more errors...

And this is shown in the browser:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ProductList> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src/App.vue
       <Root>

STR:

1. create a new vue cli project with version 3 (npx @vue/cli create new-project). Cd and install.
2. install this component: https://bit.dev/tallyb/vue-tutorial/product-list
3. Change the app.vue code to be:

<template>
  <div id="app">
    <ProductList />
  </div>
</template>

<script>
import ProductList from '@bit/tallyb.vue-tutorial.product-list';

export default {
  name: 'app',
  components: {
    ProductList
  }
}
</script>

3. npm run serve - runs ok.
4. import the component and run serve again.

react-flow compiler

Initially reported here - teambit/bit#1513

Expected Behavior

I can import a compiler like: bit import bit.envs/compilers/react-flow --compiler.

Actual Behavior

I can only import a compiler like bit import bit.envs/compilers/react --compiler or bit import bit.envs/compilers/flow --compiler

Whenever I use either of these I cannot bit tag because it will fail to build hence it will break on either React or Flow syntax.

Unable to bit import bit.envs/bundlers/vue -c

bit import bit.envs/bundlers/vue -c
failed running npm install at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21 with args: --production
npm ERR! code 1
npm ERR! path /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /home/holydiver/.nvm/versions/node/v18.12.1/bin/node /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/home/holydiver/.nvm/versions/node/v18.12.1/bin/node',
npm ERR! gyp verb cli '/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | linux | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:207:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which failed Error: not found: python
npm ERR! gyp verb which failed at getNotFoundError (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb which failed python Error: not found: python
npm ERR! gyp verb which failed at getNotFoundError (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:13:12)
npm ERR! gyp verb which failed at F (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:68:19)
npm ERR! gyp verb which failed at E (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:80:29)
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:89:16
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/index.js:42:5
npm ERR! gyp verb which failed at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:207:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack at PythonFinder.failNoPython (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-gyp/lib/configure.js:484:19)
npm ERR! gyp ERR! stack at PythonFinder. (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-gyp/lib/configure.js:406:16)
npm ERR! gyp ERR! stack at F (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:68:16)
npm ERR! gyp ERR! stack at E (/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:80:29)
npm ERR! gyp ERR! stack at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/which/which.js:89:16
npm ERR! gyp ERR! stack at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/index.js:42:5
npm ERR! gyp ERR! stack at /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/isexe/mode.js:8:5
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp ERR! System Linux 5.19.0-35-generic
npm ERR! gyp ERR! command "/home/holydiver/.nvm/versions/node/v18.12.1/bin/node" "/home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /home/holydiver/Documents/Articles/footer-social/.git/bit/components/bundlers/vue/bit.envs/2.6.21/node_modules/node-sass
npm ERR! gyp ERR! node -v v18.12.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! /home/holydiver/.npm/_logs/2023-03-28T07_02_31_834Z-debug-0.log

Web Components - Bit Stencil Compiler

Should include a Bit compiler for Stencil
https://github.com/ionic-team/stencil

Configuring Vue Bundle

Hey guys!

First, thank you for all the hard work on your bundlers. I have a question regarding the Vue bundler, which I struggled with last week.

I would like to configure the loader so that my components, by default, import .scss utilities. I normally use style-resources-loader to always load that file and configure it in a vue.config.js file, but I seem unable to make it work on the bundler.

Could you point me to any ideas on how I could achieve this?

Thanks in advance

SSR rendering not supported for Vue components (using Nuxt server)

Hi!

I tried to create a Vue component to be used on a Nuxt server as a SSR component.
I used this bundler to bundle my component.

I've created a repo to test a simple button component. Both the component and the repo are public. You can find the repo here.

The button element is loaded to the home page and as of now will most likely crash your browser on load, so BEWARE!

ng-packager build error - Cannot read property 'type' of null

Part of the process of stabilizing the experimental implementation of the Angular Bit compiler I'm running tests on well-known OSS projects that maintain Angular components.

When trying to build ngx-bootstrap, I'm getting an error when building these components:

• src/accordion
• src/carousel
• src/progressbar
• src/tabs
• src/alert
• src/chronos
• src/datepicker
• src/pagination
• src/rating
• src/timepicker
• src/typeahead
• src/popover
• src/tooltip
• src/sortable

The same general error occurs on all components (Cannot read property 'type' of null):

› bd build sortable

 directory /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-46721

Error in packaging component!
 { Error: Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-46721/components/sortable/ng-package.json

BUILD ERROR
Cannot read property 'type' of null

Building Angular Package
Building entry point '@bit/sortable'
Compiling TypeScript sources through ngc

    at makeError (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:278:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
  code: 111,
  stdout: 'Building Angular Package\nBuilding entry point \'@bit/sortable\'\nCompiling TypeScript sources through ngc\n',
  stderr: '\nBUILD ERROR\nCannot read property \'type\' of null\n',
  failed: true,
  signal: null,
  cmd: 'node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-46721/components/sortable/ng-package.json',
  timedOut: false,
  killed: false }
error: bit failed to build sortable with the following exception:
Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-46721/components/sortable/ng-package.json

BUILD ERROR
Cannot read property 'type' of null

Building Angular Package
Building entry point '@bit/sortable'
Compiling TypeScript sources through ngc

Error: Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-46721/components/sortable/ng-package.json

BUILD ERROR
Cannot read property 'type' of null

Building Angular Package
Building entry point '@bit/sortable'
Compiling TypeScript sources through ngc

    at makeError (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:278:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Additionally, on this component I'm getting a different error (Property 'pipe' does not exist on type 'EventEmitter'.):

• src/dropdown

› bd build dropdown

 directory /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632

Error in packaging component!
 { Error: Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/ng-package.json

BUILD ERROR
../../../var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/src/dropdown/bs-dropdown.directive.ts(198,10): error TS2339: Property 'pipe' does not exist on type 'EventEmitter<boolean>'.


Building Angular Package
Building entry point '@bit/dropdown'
Compiling TypeScript sources through ngc

    at makeError (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:278:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
  code: 111,
  stdout: 'Building Angular Package\nBuilding entry point \'@bit/dropdown\'\nCompiling TypeScript sources through ngc\n',
  stderr: '\nBUILD ERROR\n../../../var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/src/dropdown/bs-dropdown.directive.ts(198,10): error TS2339: Property \'pipe\' does not exist on type \'EventEmitter<boolean>\'.\n\n',
  failed: true,
  signal: null,
  cmd: 'node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/ng-package.json',
  timedOut: false,
  killed: false }
error: bit failed to build dropdown with the following exception:
Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/ng-package.json

BUILD ERROR
../../../var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/src/dropdown/bs-dropdown.directive.ts(198,10): error TS2339: Property 'pipe' does not exist on type 'EventEmitter<boolean>'.


Building Angular Package
Building entry point '@bit/dropdown'
Compiling TypeScript sources through ngc

Error: Command failed: node /private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/ng-packagr/cli/main.js -p /var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/ng-package.json

BUILD ERROR
../../../var/folders/sz/r_xm8b7d5jd2sw361yqv7tn80000gn/T/capsule-17632/components/dropdown/src/dropdown/bs-dropdown.directive.ts(198,10): error TS2339: Property 'pipe' does not exist on type 'EventEmitter<boolean>'.


Building Angular Package
Building entry point '@bit/dropdown'
Compiling TypeScript sources through ngc

    at makeError (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:174:9)
    at Promise.all.then.arr (/private/tmp/ngx-bootstrap/.git/bit/components/ng-packagr/qballer.ng-test/0.0.6/node_modules/execa/index.js:278:16)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

error TS2339: Property 'pipe' does not exist on type 'EventEmitter'.

The compiler work for these components:

• src/buttons
• src/utils
• src/collapse
• src/locale

The project's build process is working correctly (npm run build).

cant use bundlers.vue

When i run
bit import bit.envs/compilers/vue -c
I have this output:

C:\Users\Danilo\dev\@dvelasquez\components>bit import bit.envs/compilers/vue -c
error: component "bit.envs/compilers/vue" was not found

But i dont have any problem with webpack:

C:\Users\Danilo\dev\@dvelasquez\components>bit import bit.envs/bundlers/webpack -c
the following component environments were installed
- bit.envs/bundlers/[email protected]

tagging and testing should fail, not hang, when tests are wrong

Expected Behavior

the component tagging fails / tests fail to run with an error

Actual Behavior

it hangs with no error

Steps to Reproduce the Problem

1 cd project_directory
2 bit init
3 bit login
4 mkdir src
5 touch try.js
6 in try.js export default (a, b)=>a+b
7 mkdir __tests__
8 touch try.test.js
9 in try.test.js (the try function is not called in the expect method thus creating a test that doesn't work)

import try from "../try";
it('test try', () => expect((1, 2)).toEqual(3));

10 bit add src -t 'src/__tests__/*'
11 bit import bit.envs/compilers/babel -c
12 bit import bit.envs/testers/jest -t
13a bit tag --all 1.0.0
13b bit test

Specifications

• Bit version: 14.1.1
• Node version: 12.1.0
• npm / yarn version: 6.9.0
• Platform: Ubuntu Bionic Beaver
• Bit compiler (include version): bit.envs/compilers/[email protected]
• Bit tester (include version): bit.envs/testers/[email protected]

React TypeScript compiler

I have a project written in react and typescript, and the compiler is not working.
Only if I go back and install compiler version 3.0.1 is working, this version is the last before updating the compiler to work with the typescript base compiler and with the capsule.

STR:

• clone this project https://github.com/JoshK2/create-react-components-library.
• run this bit add command: bit add src/assets/* -n assets && bit add src/components/*/ -t 'src/components/{PARENT}/*test.tsx' && bit add src/styles/* -n styles && bit add src/utils/*/ -t 'src/utils/{PARENT}/*test.ts'
• run bit status, should be ok.
• run bit build to see the error.

This is the compiler I used and it's working: https://bit.dev/bit/envs/compilers/react-typescript/~dependencies?version=3.0.1

This is the compiler I used and it's NOT working: https://bit.dev/bit/envs/compilers/react-typescript/~dependencies?version=3.0.21

Can't compile SASS/SCSS

Hi there please fix this ASAP, i have some error with SASS/SCSS on Vue file like this :

Module not found: Error: Can't resolve 'sass' in '<project path>/.git/bit/components/bundlers/vue/bit.envs/0.0.3/dist/..$'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'sass-loader' instead of 'sass',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed.

I think you must update this related code :

bit.envs/src/bundlers/vue/webpack.config.js

Line 56 in b07dca8

loader: 'style!css!sass'

to code like this :

  {
    test: /\.s[a|c]ss$/,
    loader: ["vue-style-loader", "css-loader", "sass-loader"]
  }

Thanks in advance

Can't compile when using Jest and some code seems to require window.localStorage

For some reason build broke with an error message mentioning localStorage.

To see an error sample, refer to renoirb/bindings types/constraint last build

❌   Test suite failed to run 
      ● Test suite failed to run
    SecurityError: localStorage is not available for opaque origins
      at Window.get localStorage [as localStorage] (../../../components/testers/jest/bit.envs/0.0.32/node_modules/jsdom/lib/jsdom/browser/Window.js:257:15)
          at Array.forEach (<anonymous>)

This feels like a @jest-environment node setting described in this issue

Maybe I need to upgrade my dependencies versions, or something I'm missing.

[React-Typescript] Return type is forced as any without explicit declaration

For example, this exported React hook.

https://bit.dev/speedlo/hooks/use-router-navigate/~code

As you can see there is no explicit return type so TS would infer it.

However, when installed, the useRouterNavigate.d.ts looks like following. Notice the any return type.

interface IOptions {
    to?: string;
    replace?: boolean;
}
export declare function useRouterNavigate({ to, replace }: IOptions): any;
export {};

The same problem exists in compiled files when exporting.

This is obviously wrong, we don't want to be typing explicitly. I've been looking over tsconfig.json and I am not sure which option could be causing something like that. Never seen such behavior.

Tried version 3.0.18 (no luck) and 3.0.19 is broken (#54)

Add Bit Stencil Compiler to bit.dev

Description

Please add a Bit Stencil Compiler for web-components into Bit.dev
https://github.com/ionic-team/stencil-site
https://stenciljs.com/