Using the new :bundle with figwheel latest (following the CLJS official guide) I have added firebase as a dependency in my package.json

{
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "firebase": "^7.14.4",
  }
}

(:require
  [firebase])

import * as firebase from 'firebase/app';

import 'firebase/auth';

Is there a way to write this in CLJS for use with the new :bundle target.

...

export default {
  title: 'Foo',
  component: FooComponent,
  decorators: [ ... ],
  parameters: { ... }
}

@olivergeorge should be possible if you write an ES6 file, but not sure if there are issues

@tkjone we only support CommonJS style import - so there's no way to express that - and no plans at least in the near future - would need a lot of thought

@dnolen hmm. I have {:language-out :es6} set now. Adding (js* "export default " SimpleComponent) but a :simple compile throws ERROR - [JSC_MIXED_MODULE_TYPE] A file cannot be both a goog.provide'd file and an ES6 module.

expected far as I can tell

trying stuff with (js*...) in this case not likely to get you anywhere

Yeah, was reaching. Not familiar with how this could/should work.

I'm happy for wait and work with the ^:export approach for now.

I just don't know what you're trying to do

if you just want a prod build that exports some stuff then that's easy, write that stuff in your index.js

Yep, figured that might be how it works.

I was experimenting with getting reagent views to display in Storybook. The webpack guide works.

My approach required referencing a global export which is fine but left me wondering if I was missing a more common approach to importing the component.

import React from 'react';

import '../out/index.js';

export default {
  title: 'SimpleComponent',
  component: SimpleComponent,
};

export const SimpleComponent = () => <hello_bundler.core.SimpleComponent />;

Repo is here for anyone curious: https://github.com/olivergeorge/webpack-repros/tree/storybook-vs-reagent

I could provide an alternative index.js which imports my component does the "export default ..." to make a cleaner interface

That hides the quirk.

@dnolen gotcha. Curious though: In the https://www.npmjs.com/package/firebase#include-only-the-features-you-need. One example they use seems to be commonjs

var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');

I don't know anything about firebase so I can't really offer more insight

In a scenario like the above (aside from using shadow-cljs), to achieve the smaller packages in production, would the recommended approach be to go back to the previous way of using webpack and ClojureScript?

@tkjone try doing (:require [“firebase/auth” :as firebase.auth])

the important thing isn’t the es6 import stuff, it’s the way they’re referencing the package by path

No such namespace: firebase/auth, could not locate firebase_SLASH_auth.cljs, firebase_SLASH_auth.cljc, or JavaScript source providing "firebase/auth" (Please check that namespaces with dashes use underscores in the ClojureScript file name) in file src/pillar/app.cljs

> the important thing isn’t the es6 import stuff, it’s the way they’re referencing the package by path Totally. This was my thought as well.

and you’re using the :bundle build?

Yep.

Everything else is working with the commonjs style, it’s just that “style” of require.

@dnolen does that seem like something that should be supported? are we doing something wrong?

I likely know answer to this but.. for cljs macros you can’t pre-compile javascript only code, right? (for react native, I was hoping to inline static style props, e.g. `{:style (sh {:flex 1})`, but doesn’t look like that’s possible since the `StyleSheet` is a js object)

@alidcastano not sure what you mean. can you explain what the desired CLJS or JS output is?

@lilactown using Helix, imagine this declaration

(def styles (.create rn/StyleSheet #js {:container #js {:flex 1})
(defnc Foo [] ($ rn/View {:styles (.-container styles))

(defnc Foo [] ($ rn/View {:styles (sh {:flex 1}))

okay, so what you want is to “lift” the style creation outside of the form you’ve written the macro in

yeah it’s not easy to do that in CLJS, I wouldn’t recommend it

it’s possible to lift the style creation outside the form with macros, but it seems like just memoizing the call should do what you want:

(def sh (memoize #(.create rn/StyleSheet (clj->js %)))

depending on how many different styles you expect, you may or may not want to limit the maximum size of your cache using something like https://github.com/burbma/cljs-cache

@alidcastano I recommend offloading the code into a helper fn. so you emit (def styles (your-macro-ns/make-stylesheet #js {:container #js {:flex 1})) and have the make-stylesheet fn for whatever it needs to call rn/StyleSheet

(defn make-stylesheet [s] (.create rn/StyleSheet s)) or so

Hi, I'm 100% sure that this question have been asked before, but after reading documentation, and few answers from google, I'm starting thinking that I don't understand something I have very simple clojurescript project with shadow-cljs.edn config

{:source-paths ["src"]
 :dependencies []
 :builds {:app {:target :browser
                :output-dir "public/js"
                :asset-path "/js"
                :modules {:main {
                                 :entries [app.core]}}}}}

@rafal.wysocki the server running on 9630 is for the internal shadow-cljs UI and websockets. it does not load any of your code. if you want a webserver for your code use :dev-http https://shadow-cljs.github.io/docs/UsersGuide.html#dev-http

if you just want a browser repl use shadow-cljs browser-repl but that also won't load any of your code unless you (require 'app.core) it and use it that way

@thheller thanks, it's working now, I think it should be more explicitly mentioned in the docs

this is rather long read and I didn't notice it

it is mentioned here https://github.com/thheller/shadow-cljs#quick-start if you want something shorter 😛

Hey! Is it possible to use SCSS with shadow-cljs live reloading?

@marodriguez if you start a scss watcher, shadow-cljs will hot reload changes to your CSS files

@lilactown thanks, in that case I would need to start a scss watcher and a shadow watcher right? I was thinking of a plugin/config to add the scss watcher into the shadow one.

Any suggestions?

yeah, you would start both watchers

there might be a JVM scss watch that you could start in your shadow-cljs process, I’m not sure

probably easier to run them separately tbh

there are many options to run multiple things for you. shadow-cljs does not need to do that.

https://github.com/mysticatea/npm-run-all/blob/master/docs/run-p.md is one option

https://www.npmjs.com/package/foreman

Will check it out thanks. I come from React/Angular/Vue and all of them have like scss out of the box. Maybe there was like a recommended way of doing it.

yeah that makes sense

I just use https://github.com/sass/node-sass#command-line-interface typically

I’m trying to build a clj+cljs library (using deps.edn and cljx) and I’m looking for guides on how to set up and organize everything, and/or other libraries that I can look at for inspiration. Does anybody have any recommendations? (Sorry in advance if this is the wrong place to ask!)