rails_7_assets_notes.txt

Adding webpacker back ?!
====================================================================================

	# Gemfile
	gem 'webpacker', '~> 6.0'

	# OR if you prefer to use master
	gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
	yarn add https://github.com/rails/webpacker.git

Then

	./bin/bundle install
	./bin/rails webpacker:install

	yarn install



n Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node
      create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
Copying postcss.config.js to app root directory
      create  postcss.config.js
Copying babel.config.js to app root directory
      create  babel.config.js
Copying .browserslistrc to app root directory
      create  .browserslistrc
The JavaScript app source directory already exists
       apply  /home/isalem/.rvm/gems/ruby-3.0.0@7/gems/webpacker-5.4.3/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
      create    bin/webpack
      create    bin/webpack-dev-server
      append  .gitignore
Installing all JavaScript dependencies [5.4.3]
         run  yarn add @rails/webpacker@5.4.3 from "."

* Make sure

rake tmp:cache:clear

Usage

	Once installed, you can start writing modern ES6-flavored JavaScript apps right away:

	app/javascript:
	  # Only Webpack entry files here
	  └── application.js
	  └── application.css
	  └── src:
	  │   └── my_component.js
	  └── stylesheets:
	  │   └── my_styles.css
	  └── images:
		  └── logo.svg


Layout:

	<%= javascript_pack_tag 'application' %>
	<%= stylesheet_pack_tag 'application' %>

* https://github.com/rails/webpacker


Why sprockets is used in Rails 7
================================================================================================

As known, sprockets can (same as webpacker or esbuild)

- combine different files to bundle for production, 
- transpile source files from synatx to another
- minify and uglify 
- auto rebuild files in dev mode

Before there was a nodejs for bundling, commonjs, amd, ES modules, webpack and browserify (using webpack and other tools), there was sprockets
Webpacker embraces the concept of js modules, integrates with babel, postcss .. etc
But asset pipline for javascript sprinkles, css, images and other static files will continoue 
So webpack or esbuild for javascript .. and sprockets for everything else ... 
Yet, css also can be managed by esbuild for example or webpack 


So, rails assets:precompile will 
- build all sprockets assets into public/assets directory .. then will build all the webpack assets into public/packs directory 


*************************************************************************************************************************************
*************************************************************************************************************************************
Future of sprockets is used in Rails 7
---------------------------------------
- most likely sprockets will be replaced by Propshafta new asset pipleline library
- much simpler
- using Propshaft will also replace using 3rd party tools such as jsbundling-rails & cssbundling-rails


- you can start rails 7 app using propshaft by

	> rails new -a propshaft myapp


- to upgrade from sprockets to propshaft

	# https://github.com/rails/propshaft/blob/main/UPGRADING.md


*************************************************************************************************************************************
*************************************************************************************************************************************
*************************************************************************************************************************************
*************************************************************************************************************************************

importmap (in rails7)
===================================================================================

	* https://github.com/wicg/import-maps
	* https://github.com/rails/importmap-rails

- The default Rails 7 tooling is called “import maps", which is a browser tool that lets you map a logical name to a downloaded module directly in the browser without needing to do further bundling on the server for the browser, and a Rails wrapper to manage that mapping from your codes.

* https://noelrappin.com/blog/2021/09/rails-7-and-javascript/
* https://blog.appsignal.com/2021/12/15/whats-new-in-rails7.html

- Remember, webpack requires nodejs .. and thats what rails is trying to solve 

- For example, to install date-fns:

	$ ./bin/importmap pin date-fns

- But this also means that you won't be able to use TypeScript or JSX as they require transpilation to JS before use.
	
	So, if you want to use React with JSX, you still have to fall back to a different setup (using webpack/rollup/esbuild).
	Rails 7 can do this for you. All you need is one command with your chosen strategy:

	$ ./bin/rails javascript:install:[esbuild|rollup|webpack]

- Turbolinks and UJS Replaced by Turbo and Stimulus



- to add supoprt to rails 6

	rails new app -skip-javascript	# no script what so ever


	> bundle add importmap-rails
	> rails importmap:install 

	application layout -> <%= javascript_importmap_tags %>

- 	> bundle add hotwire-rails
	> rails hotwire:install
	

- now to add additional library 

	> bin/importmap pin sortablejs	# --from jsdeliver instead of jspm ???  A free CDN for Open Source

	--> config/importmap.rb --> pin "sortablejs", to: "https://ga.jspm.io/npm:sortablejs@1.14.0/modular/sortable.esm.js"
	
	
- https://blog.code-fabrik.ch/posts/2021/10/14/migrate-webpacker-to-importmaps/



Semantic-ui (fomantic) + importmap
-----------------------------------
This is a tricky setup since it requires jQuery .. 

make sure you mantifst.js:

	//= link_tree ../images
	//= link_directory ../stylesheets .css
	//= link_tree ../../javascript .js
	//= link_tree ../../../vendor/javascript .js

Then 

	> bin/importmap pin fomantic-ui
	> bin/importmap pin jquery


jquery-globals.js:

	import jquery from 'jquery';
	window.jQuery = jquery;
	window.$ = jquery;

application.js

	import "./jquery-globals";
	import "fomantic-ui";

	$('.button')
		.popup({
			on: 'click'
		})
	;

html:

	<div class="ui icon button" data-content="Add users to your feed">
		<i class="add icon"></i>
	</div>


Using Vue ?
-----------
* you can use https://generator.jspm.io/#U2VhYGAIzSvJLMlJTWEAACKwkqAOAA to generate any package 
* You can also use https://esm.sh/vue ..... 
* check also jsdeliver https://www.jsdelivr.com/package/npm/vue?path=dist

	> pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.min.js"

app/javascript/components/vue_comp.js:

	import Vue from "vue";
	new Vue({
		el: '#vue',
		data: {
			message: 'Hello'
		},
		computed: {
			// a computed getter
			reversedMessage: function () {
				// `this` points to the vm instance
				return this.message.split('').reverse().join('')
			}
		}
	})


app/javascript/application.js:

	import "components/vue_component"

html:

	<div id="vue">
		<p>{{message}}</p>
	</div>

* https://itnext.io/ruby-on-rails-7-importmaps-and-vuejs-3-no-more-webpacker-4ef06372a49c
* https://blog.code-fabrik.ch/posts/2021/10/14/migrate-webpacker-to-importmaps/

Using react ?
------------

* check https://esm.sh/
* check skypacks

	https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized

	seacrh fopr react, react-dom
	
	Or

	https://cdn.skypack.dev/react
	https://cdn.skypack.dev/react-dom
	
	pin "react", to: "https://cdn.skypack.dev/pin/react@v17.0.1-yH0aYV1FOvoIPeKBbHxg/mode=imports,min/optimized/react.js"
	pin "react-dom", to: "https://cdn.skypack.dev/pin/react-dom@v17.0.1-oZ1BXZ5opQ1DbTh7nu9r/mode=imports,min/optimized/react-dom.js"	
	

	* https://learnetto.com/tutorials/how-to-use-react-with-rails-7

app/javascript/react_component.js

	import React from "react"
	import ReactDOM from "react-dom"

	const e = React.createElement

	class Hello extends React.Component {
		render() {
			return e('div', null, `Hello ${this.props.toWhat}`);
		}
	}

	ReactDOM.render(
		e(Hello, {toWhat: 'world'}, null),
		document.getElementById('react')
	)



application.js

	import "components/react_component"



html:

	import React from "react"
	import ReactDOM from "react-dom"

	const e = React.createElement

	class Hello extends React.Component {
		render() {
			return e('div', null, `Hello ${this.props.toWhat}`);
		}
	}

	ReactDOM.render(
		e(Hello, {toWhat: 'world'}, null),
		document.getElementById('react')
	)



Using d3 ?
----------

> ./bin/importmap pin d3
	
app/javascript/application.js:

	import "components/vue_component"

app/javascript/components/d3_comp.js:

	import {select, selectAll} from "d3-selection"

	var circle = selectAll("circle")
	circle.style("fill", "steelblue");
	circle.attr("r", 30);

html:

	<svg width="720" height="120">
	  <circle cx="40" cy="60" r="10"></circle>
	  <circle cx="80" cy="60" r="10"></circle>
	  <circle cx="120" cy="60" r="10"></circle>
	</svg>





For JS/css bundling
========================================================================================

esbuild:
--------

	https://github.com/rails/jsbundling-rails
	https://github.com/rails/cssbundling-rails

	For existing rails:

	# 
	> bundle add cssbundling-rails
	> rails css:install:[tailwind|bootstrap|bulma|postcss|sass]

	# https://github.com/rails/jsbundling-rails
	> bundle add jsbundling-rails
	
* Remember, jsbunlder requires npm 7+ .. 
* lates node 17+

	> npm install -g npm@latest
	> nvm install node latest
	
* lates yarn 

	> npm install --global yarn	

	For new:
	
	> rails new rails7e -j esbuild --css tailwind / bootstrap
	> ./bin/dev
	
- to add

	> bundle add jsbuild-rails
	> bin/rails esbuild:install
	
	* check manisfest file
	* adding javascript_include_tag in layout
	
	> yarn build --watch	--> check app/asstes/build

	> yarn add bootstrap
	
	- then add to app/javascript/application.js
	
		import "boostrap/dist/js/bootstrap.bundle
	
	> yarn build --watch
	
		then check app/asstes/build/application.js 
		
	- then add to app/javascript/application.js
	
		import "boostrap/dist/css/bootstrap.css
		
		- this will add app/asstes/build/application.css	--> will override what you have in stylesheets/application.css !
		- in stylehseets/application.css
		- so use the one in stylehseets application.css:
		
			*= require "bootstrap"
	
		- but before .. go to initializers/assets.rb
		
			Rails.application.config.assets.paths << 'node_modules'
		
		- to activate popover, add to app/javascript/application.js
		
			import bootstrap from "bootstrap/dist/js/bootstrap/bundle"
			
			new bootstrap.Popover(document.querySelector('[data-bs-toggle="popover"]'), {
				trigger: 'hover
			})
		
- Outputs always in:
		
	app
	  assets
		builds
		  application.js
		  application.css
	
	
- Notice the package.json:

	{
	  "name": "app",
	  "private": "true",
	  "dependencies": {
		"@fortawesome/fontawesome-free": "^5.15.4",
		"@hotwired/stimulus": "^3.0.1",
		"@hotwired/turbo-rails": "^7.1.0",
		"autoprefixer": "^10.4.2",
		"daisyui": "^1.25.4",
		"esbuild": "^0.14.11",
		"postcss": "^8.4.5",
		"postcss-import": "^14.0.2",
		"tailwindcss": "^3.0.13"
	  },
	  "scripts": {
		"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
		"build:css": "tailwindcss -i app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css"
	  }
	}	
	
- And Procfile.dev

	web: bin/rails server -p 3000
	js: yarn build --watch
	css: yarn build:css --watch

- So when you are /bin/dev --> 

	#!/usr/bin/env bash

	if ! command -v foreman &> /dev/null
	then
	  echo "Installing foreman..."
	  gem install foreman
	fi

	foreman start -f Procfile.dev	
	
- Now you can have custom esbuild instead of:

		"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",

	- replace it by:
	
		"build": "node esbuild.config.js",

	- esbuild.config.js:

		const path = require('path');

		require("esbuild").build({
		  entryPoints: ["application.js"],
		  bundle: true,
		  outdir: path.join(process.cwd(), "app/assets/builds"),
		  absWorkingDir: path.join(process.cwd(), "app/javascript"),
		  watch: true,															<--- keep false if running > rails assets:precompile
		  // custom plugins will be inserted is this array
		  plugins: [],
		}).catch(() => process.exit(1));


Tailwind
-------------------------------------------------------------------------
# https://www.simplethread.com/how-to-create-a-new-rails-7-app-with-tailwind/
# https://tailwindcss.com/

- Setup

	- To add Tailwind to Rails

		./bin/bundle add tailwindcss-rails
		./bin/rails tailwindcss:install


	./config/tailwind.config.js:

		module.exports = {
		  content: [
			'./app/helpers/**/*.rb',
			'./app/javascript/**/*.js',
			'./app/views/**/*',
		  ],
		  theme: {
			extend: {},
		  },
		  plugins: [],
		}

	application.tailwind.css:

		@tailwind base;
		@tailwind components;
		@tailwind utilities;

	- then

		> ./bin/dev

	- if you want to install fontawesome icons for example:

		> yarn add @fortawesome/fontawesome-free

	application.tailwind.css:
		
		$fa-font-path: "@fortawesome/fontawesome-free/webfonts/";
		@import "@fortawesome/fontawesome-free/scss/fontawesome";

		@import "@fortawesome/fontawesome-free/scss/regular";
		@import "@fortawesome/fontawesome-free/scss/solid";
		@import "@fortawesome/fontawesome-free/scss/brands";
		@import "@fortawesome/fontawesome-free/scss/v4-shims";

		@tailwind base;
		@tailwind components;
		@tailwind utilities;

Now, remember tailwind is not scss compiler but you still can use @import with certain conditions:
# https://tailwindcss.com/docs/using-with-preprocessors

- To use more than css files for different layouts / and leverage the postcss
# https://dev.to/thomasvanholder/extract-class-in-relative-file-with-rails-and-tailwind-css-50ii

	app/assets/stylesheets/somethingelse.tailwind.css

	tailwind.config.js:
	
		module.exports = {
		  content: [
			'./app/views/**/*.html.erb',
			'./app/helpers/**/*.rb',
			'./app/javascript/**/*.js',
			'./app/assets/stylesheets/**/*.css'	<----------
		  ],
		  theme: {
			extend: {},
		  },
		  plugins: [
			require('daisyui'),	<-- need to be installed (different demo)
		  ]
		}	
	
	postcss.config.js
	
		module.exports = {
			plugins: [
				require('postcss-import'),
				require('tailwindcss'),
				require('autoprefixer'),
			]
		}	
	
	
	esbuild.config.js
		
		const path = require('path');

		require("esbuild").build({
			entryPoints: ["application.js"],
			bundle: true,
			outdir: path.join(process.cwd(), "app/assets/builds"),
			absWorkingDir: path.join(process.cwd(), "app/javascript"),
			watch: true,													---> switch it to false to build production !
			// custom plugins will be inserted is this array
			plugins: [],
		}).catch(() => process.exit(1));	
	
	package.json
	
	  "scripts": {
		"build": "node esbuild.config.js",
		"build:css1": "tailwindcss --postcss -i app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",	<-- notice --postcss
		"build:css2": "tailwindcss --postcss -i app/assets/stylesheets/somethingelse.tailwind.css -o ./app/assets/builds/somethingelse.css"
	  }

	in layout somethinglese.html.erb
	
		<%= stylesheet_link_tag "landing", "data-turbo-track": "reload" %>

- what if I want to use some sass stuff ??? easy

	- remove the sass-rails gem and rely on postcss now. 
	- Using require('tailwindcss/nesting') is included in the default tailwind package.

		PostCSS has plugins to replace the missing Sass behaviour.

		// postcss.config.js
		module.exports = {
		  plugins: [
			require('postcss-import'),
			require('tailwindcss/nesting'),
			require('tailwindcss'),
			require('autoprefixer'),
		  ]
		}












- @import, @apply

	application.tailwind.css:
		
		/* old */
		@tailwind base;
		@tailwind components;
		@tailwind utilities;

		/* new */
		@import "tailwindcss/base";
		@import "tailwindcss/components";
		@import "tailwindcss/utilities";
		
		
		@import "./buttons.css";

	buttons.css:

		.btn {
			@apply px-4 py-4 rounded font-semibold bg-gray-200 text-black;
		}

- animation

	# tailwind animation classes
	# https://tailwindcss.com/docs/animation
	
		class: animate-bounce
		
	- to repeat only once:
		
		style="animation-iteration-count: 1"
		
		others:
		
			animation-duration: 10ms
			

	- example:
	
		class="animate-ping" style="animation-iteration-count: 1;animation-direction: reverse"


	# https://animate.style/
	- Using animate.css
	
		class: animate__animated animate__fadeInDown
		
	# https://github.com/juliangarnier/anime/ --> https://animejs.com/
	

- If you want to customize any component

# https://github.com/unlight/tailwind-components
# https://tailwindcss.com/docs/configuration
# https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

- components

# https://github.com/creativetimofficial/tailwind-starter-kit

https://github.com/aniftyco/awesome-tailwindcss#ui-libraries-components--templates

# https://tailblocks.cc/
# https://kutty.netlify.app/components/
# https://tailwindtemplates.io/templates
# https://tailwindcomponents.com/
# https://merakiui.com/components/
# https://lofiui.co/#components-grid
# https://www.gustui.com/docs/application/components/alerts
# https://windstrap.netlify.app/#for-js .. using bootstrap5 JS
# https://tailwind-elements.com/docs/standard/components/buttons/
# https://github.com/hasinhayder/tailwind-cards
# https://kitwind.io/products/kometa/components/headers
# https://tailwindui.com/components/application-ui/application-shells/stacked
# https://www.creative-tim.com


- custom

# https://daisyui.com/
# https://flowbite.com/docs/components/tooltips/
# https://github.com/creativetimofficial/tailwind-starter-kit/tree/main/Landing%20Page/html-landing-page

- references

# https://github.com/happycodrz/tailwindcss-awesome
# https://github.com/aniftyco/awesome-tailwindcss	






Svelte + ESBuild
=============================================================================
https://anonoz.github.io/tech/2021/12/11/rails-tailwindcss-svelte.html

- Setup

	> yarn add esbuild-svelte
	
	- esbuild.config.js
	
		const path = require('path');

		require("esbuild").build({
			entryPoints: ["application.js"],
			bundle: true,
			outdir: path.join(process.cwd(), "app/assets/builds"),
			absWorkingDir: path.join(process.cwd(), "app/javascript"),
			watch: true,
			// custom plugins will be inserted is this array
			plugins: [require('esbuild-svelte')()],	<---------------- add plugin here
		}).catch(() => process.exit(1));	

	app/javascript/svelte/Demo.svelte
	
		<script>
			import {
				onMount
			} from 'svelte';

			export let argName;

			onMount(() => {
				if (argName == undefined) {
					argName = "General Kenobi"
				}
			})
		</script>
		<!--  -->
		<h1 class="italic text-blue-700">Hello there, {argName}!</h1>

	application.js
	
		import Demo from './svelte/Demo.svelte'
		window.addEventListener('load', () => {
			if (t = document.querySelector('[data-svelte-component="Demo"]')) {
				const app = new Demo({
					target: t
				});
			}
		})

	html:
	
		<div data-svelte-component="Demo"></div>

	
	
	
EsBuild With React
---------------------------------------------------	--------------------------------------------	
- example .. 

	> yarn add react react-dom	
	# esbuild will detect any newly added package in node_modules
	

	components/react_comp.jsx:

		import React from "react"
		import ReactDOM from "react-dom"

		const rootElement = document.getElementById("react");
		class Greetings extends React.Component {
			render() {
				return <h1>Hellow {this.props.name}</h1>;
			}
		}
		function App() {
			return (
				<div className='text-danger'>
					<Greetings name="Ali" />
				</div>
			);
		}
		ReactDOM.render(<App />, rootElement);



	application.js:

		import "./components/react_comp"

	html:

		<div id="react"></div>
		
	* -=--> check postcss







Vite With Svelte - (https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e)
---------------------------------------------------	--------------------------------------------

Also

	* https://github.com/ledermann/templatus #(Vue)
	# https://github.com/ledermann/templatus-hotwire/	
	# https://github.com/ElMassimo/vite_ruby / rails	

->

	# https://dev.to/buhrmi/setting-up-a-new-rails-7-app-with-vite-inertia-and-svelte-c9e


	> rails new rails7s --skip-javascript --skip-asset-pipeline
	> bundle add inertia_rails
	> bundle add vite_rails

	> bundle exec vite install
	> yarn add axios svelte @sveltejs/vite-plugin-svelte @inertiajs/inertia @inertiajs/inertia-svelte @inertiajs/progress
	
	# app/frontend/entrypoints
	
	import axios from 'axios'

	import { createInertiaApp } from '@inertiajs/inertia-svelte'
	import { InertiaProgress } from '@inertiajs/progress'

	const pages = import.meta.glob('../pages/**/*.svelte')

	const csrfToken = document.querySelector('meta[name=csrf-token]').content
	axios.defaults.headers.common['X-CSRF-Token'] = csrfToken

	InertiaProgress.init()

	createInertiaApp({ 
	  resolve: name => pages[`../pages/${name}.svelte`](),
	  setup({ el, App, props }) {
		new App({ target: el, props })
	  },
	})


	# vite.config.ts
	
	import { defineConfig } from 'vite'
	import RubyPlugin from 'vite-plugin-ruby'
	import { svelte } from '@sveltejs/vite-plugin-svelte';

	export default defineConfig({
	  resolve: {
		dedupe: ['axios']
	  },
	  plugins: [
		RubyPlugin(),
		svelte({
		  experimental: {
			prebundleSvelteLibraries: true
		  }
		})
	  ]
	})

--> Rails + Vite

	# https://www.bootrails.com/blog/vitejs-rails-a-wonderful-combination/
	
--> Vue + esBuild

	# https://how-to.dev/how-to-build-with-esbuild-code-generated-by-vue-cli
	
--> Rails + vue + esBuild

# interesting https://www.bootrails.com/






Prepare Symantic-UI
-----------------

	* https://medium.com/geekculture/tips-on-rails-6-with-webpacker-and-semantic-ui-6c0d69cd33ba
	* make sure to use gulp version 4 (npm -g)

	> npm uninstall gulp -g ??
	> npm install gulpjs/gulp-cli -g
	> npm install --save-dev gulp@4
	
	> yarn add fomantic-ui --ignore-scripts
	> yarn --cwd node_modules/fomantic-ui run install
	
		? Set-up Semantic UI Automatic (Use default locations and all components)
		? We detected you are using NPM Nice! Is this your project folder? /home/isalem/Projects/rails7 Yes
		? Where should we put Semantic UI inside your project? ./app/javascript/semantic
	
	> cd app/javascript/semantic/
	> gulp build
	
For css Using gem

	https://github.com/doabit/semantic-ui-sass

	
References
----------
https://github.com/jasonfb/hot-glue
https://www.colby.so/posts/live-reloading-with-esbuild-and-rails