Marco Roth marcoroth

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

There's one thing that I felt was missing from the CableReady ecosystem and should be doable: lazy loading

I introduce:

Futurism

with a helper in your template

&lt;%= futurize @posts %&gt;

Choices.js Stimulus wrapper

https://joshuajohnson.co.uk/Choices/

Soon, this will be published as an NPM package, but there's an absence of documentation right now. It supports almost all functions from the original library; soon it will support 100% of them.

This wrapper adds Ajax pre-fetch search. Happens if controller has a data-search-path attribute.

Stimulus controller targets use new v2 syntax. Controller attaches a reference to itself on the element so that you can access the internal state from external scripts.

	<div class="card">
	<div class="card-header">
	<h3 class="card-title">
	<%= notification.to_notification.in_app_subject %>
	</h3>
	</div>
	<div class="card-body">
	<%= notification.to_notification.in_app_body %>
	</div>
	</div>

	import { Controller } from "stimulus"
	import SlimSelect from "slim-select"
	import "slim-select/dist/slimselect.min.css"
	import "../style/slimselect-customized.css"

	export default class extends Controller {
	connect() {
	const limit = this.data.get("limit")
	const placeholder = this.data.get("placeholder")
	const searchText = this.data.get("no-results")

	// DONT FORGET TO `yarn add esbuild-loader` !!!

	// config/webpacker/environment.js
	const { environment } = require('@rails/webpacker')
	const { ESBuildPlugin } = require('esbuild-loader')

	const esBuildUse = [
	{
	loader: require.resolve('esbuild-loader'),
	// What you want to compile to, in this case, ES7

	class Card
	SUITS = %w(S H D C).freeze
	RANKS = %w(2 3 4 5 6 7 8 9 10 J Q K A).freeze
	RANKS_SCORES = RANKS.each_with_index.to_h

	include Comparable

	attr_reader :suit, :rank

	def initialize(suit, rank)

	# Add color coding based on Rails environment for safety

	if defined? Rails
	banner = if Rails.env.production?
	"\e[41;97;1m #{Rails.env} \e[0m "
	else
	"\e[42;97;1m #{Rails.env} \e[0m "
	end

	# Build a custom prompt

	# Formats a +number+ into an abbreviated string suitable for
	# displaying social media type metrics
	#
	# ==== Options
	# * start_at - The first number to start abbreviating, defaults
	# to 10_000. Certain metrics may want to start at e.g. 1000.
	#
	# ==== Examples
	# number_to_social(123) # => 123
	# number_to_social(1457) # => 1457

	class ApplicationController < ActionController::Base
	after_action :clear_view_component_cache, if: -> { Rails.env.development? }

	def clear_view_component_cache
	ViewComponent::CompileCache.cache = Set.new
	end
	end