@rubys so I'm thinking an easy way rubify ViewComponent is to use wunderbar in the call method https://github.com/github/view_component#inline-component
and then including ruby2js via the filter there, I'm not sure that would work out the way I'd want it, I still favor the lissio syntax, but since ViewComponent is natively supported by Rails 6.1 might consider an add on vs rolling my own
@fkchang I ported whimsy applications from Angular to React to Vue, and they currently use Vue. I wasn't happy with Angular, was happy with React until they started playing games with their licensing so I ported to Vue. React changed their licensing back, but at that point the conversion was done.
wunderbar does support SSR, and whimsy uses that support, for example: https://github.com/apache/whimsy/blob/1800878b2b1345c5ae02d2bd2c55289a05786cfe/www/board/agenda/views/main.html.rb#L20
@/all All right, I have a very preliminary package and writeup on GitHub now: https://github.com/whitefusionhq/rb2js-loader
Basically the idea is to have sidecar
.js.rb files alongside your ViewComponent files and use something nice like LitElement to take your server-rendered markup and do something cool with it as a web component on the client
But all that last part is opinionated—you can use the loader to load anything. I haven't tried it yet but you could probably write Stimulus controllers in Ruby if you wanted to.
@jaredcwhite your webpack loader could go a long way towards addressing https://twitter.com/t_a_w/status/1314285541177917446
BTW, tests are failing now…if I take the es2015 require out of tagged_templates, it passes again. Any suggestions?
@rubys is there a typo in snowpack-plugin-require-context ? I get this while running yarn start
/Users/fkchang/src/stimulus-starter/node_modules/@rubys/snowpack-plugin-require-context/plugin.js:70
let recurse = args[1]?.value;
^deleting the ? works for me, do I need a node upgrade for that line to work?
@jaredcwhite so I'm trying to debug ruby2js webpack loader with Rails, how can I see the js that is getting generated? It feels like it is not reading my Rails.root/rb2js.config.rb
@fkchang Have you enabled stimulus in your rails application? See: https://betterprogramming.pub/how-to-add-stimulus-js-to-a-rails-6-application-4201837785f9
I have hotwire-rails gem, so I should have stimulus, I suspect that the option for the stimulus filter in my rb2js.config.rb isn't being honored from this error message
foo_controller.js.rb:1 Uncaught ReferenceError: Stimulus is not defined
at Object../app/javascript/controllers/foo_controller.js.rb (foo_controller.js.rb:1)
at __webpack_require__ (bootstrap:63)
at webpackContext (controllers sync _controller\.js\.rb$:8)
where the source map shows
class FooController < Stimulus::Controller
This message was deleted
"dependencies": {
"@hotwired/turbo-rails": "^7.0.0-beta.5",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.2.1",
"@ruby2js/webpack-loader": "^1.3.1",
"stimulus": "^2.0.0"
},
@fkchang can you upgrade to the latest ruby2js (4.0.2) and see if the following works for you: https://www.ruby2js.com/examples/rails/stimulus_sprockets ?
I did a js Stimulus controller and note the syntax they tend do is
import { Controller } from "stimulus"
export default class SubfieldController extends Controller {
....
I got a js controller to work with that, but can't seem to associate with the ruby2js controller, though the Stimulus is not defined error is gone -- how can I see the js that gets generated?
@rubys I'll try it at first opportunity
So I think it's getting them to load in the applications. THe way the rails app is setup we do this to load the js stimulus controllers
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))
To load the ruby2js, I tried something similar, as well as something from Jared's webpack example, neither worked, alone or together
const rubyContext = require.context("controllers", true, /_controller\.js\.rb$/)
function importAll(r) {
r.keys().forEach(r)
}
importAll(rubyContext)
application.load(definitionsFromContext(rubyContext))
I also note that if I have a js file that includes ruby2js via the require.context.... changed ruby2js doesn't get rebuilt unless I change the js file that calls that - so not certain what the webpacker setup should be, but I'm sort of close
@fkchang I now have a stimulus webpack example posted: https://www.ruby2js.com/examples/rails/stimulus_webpacker