Can't use bit.envs/compilers/utils as a compiler

teambit / envs

Component development environments for the Bit community

https://bit.dev/bit/envs

Other

64 stars 9 forks source link

Can't use bit.envs/compilers/utils as a compiler #117

Closed maxmumford closed 4 years ago

maxmumford commented 4 years ago

Describe the bug

When I try to build a component using bit.envs/compilers/utils as the compiler, I get the following message:

"bit.envs/compilers/utils@0.1.5" does not have a valid compiler interface, it has to expose a compile method

I have tried all previous versions of this compiler with no success.

Steps to Reproduce

Create a new project Run npm init to seed the project with a package.json Run bit init Create a folder called test Add test.scss to test folder Run bit add . inside the test folder In the package.json set the default compiler to bit.envs/compilers/utils@0.1.5 Run bit build

Expected Behavior

The component should build successfully

Specifications

Bit version: 14.7.6
Node version: v12.14.1
npm / yarn version: 6.13.4
Platform: win 10
Bit compiler (include version): bit.envs/compilers/utils @ all versions
Bit tester (include version):

GiladShoham commented 4 years ago

Hi @maxmumford , This is not a real compiler, it's only utils used by different compilers. What is your stack / frameworks you are using?

maxmumford commented 4 years ago

ah - I'm using Angular, my goal was to build a component with SCSS variables and mixins and to expose the source scss to users - the utils proj looked like it fitted because of the description "Return all source files".

Currently I have got it compiling using the typescript compiler with an empty public_api.ts but this seems pretty hacky. What's the right way to go about this?

Thanks

GiladShoham commented 4 years ago

@Tallyb Do we have some documented practice about this case?

Tallyb commented 4 years ago

@maxmumford - as @GiladShoham mentioned - the compilers/utils is a set of utilities to help you build a compiler. You can look at its usage in the following compilers:

Vue: https://bit.dev/bit/envs-dev/compilers/vue/~code
Angular: https://bit.dev/bit/envs-dev/compilers/angular/~code
Stencil: https://bit.dev/bit/envs-dev/compilers/stencil/~code

Feel free to use it in your project.

maxmumford commented 4 years ago

Mine is a very common scenario so an official compiler and guide for it would be very helpful for the community.

In the meantime, I have found a messy solution:

override the scss component compiler to use the typescript compiler <--- probbaly can use any compiler which does nothing to scss files
set the component main file to be public_api.scss which is empty <--- not sure this is required
build and install the component
import from it in other scss file like @import "~@bit/..."

Tallyb commented 4 years ago

@maxmumford - I think you can skip the compiler for the scss files altogether. This is the solution described in the best practices (https://docs.bit.dev/docs/best-practices#handling-styles), also referenced from the angular guide.

Alternatively, I was wondering if a solution similar to the one in Vue is working: https://docs.bit.dev/docs/vue-guidelines#styling-components If you are willing to test it, it would be great. Docs PRs are also welcome.

maxmumford commented 4 years ago

Thanks Tally, I did try specifying '-' compiler but ran into issues - can't remember what they were exactly anymore...

We've decided not to use Bit in the end but hopefully this issue will come in handy for other users.