GitBook: [#8] Adjusted JS setup docs

Author: jonasjabari

docs/SUMMARY.md

@@ -8,8 +8,8 @@
 
 * [Installation & Update](getting-started/installation-update/README.md)
   * [JS via Webpacker](getting-started/installation-update/js-via-webpacker.md)
-  * [JS via JSBundling-Rails](getting-started/installation-update/js-via-jsbundling-rails.md)
   * [JS via Importmap](getting-started/installation-update/js-via-importmap.md)
+  * [JS via JSBundling-Rails](getting-started/installation-update/js-via-jsbundling-rails.md)
 * [Hello world](getting-started/hello-world.md)
 
 ## API

docs/getting-started/installation-update/README.md

@@ -70,18 +70,18 @@ Don't apply the "matestack-ui" id to the body tag.
 
 ### JavaScript installation
 
-#### Rails 7 importmap based installation
-
-{% content-ref url="js-via-importmap.md" %}
-[js-via-importmap.md](js-via-importmap.md)
-{% endcontent-ref %}
-
 #### Webpacker > 5.x based JavaScript installation
 
 {% content-ref url="js-via-webpacker.md" %}
 [js-via-webpacker.md](js-via-webpacker.md)
 {% endcontent-ref %}
 
+#### Rails 7 importmap based installation
+
+{% content-ref url="js-via-importmap.md" %}
+[js-via-importmap.md](js-via-importmap.md)
+{% endcontent-ref %}
+
 #### JSBundling-Rails based installation
 
 {% content-ref url="js-via-jsbundling-rails.md" %}
@@ -138,6 +138,12 @@ Like documented here: [https://github.com/rails/cssbundling-rails](https://githu
 ./bin/rails css:install:bootstrap
 ```
 
+And then add `matestack-ui-bootstrap`:
+
+```bash
+yarn add matestack-ui-bootstrap
+```
+
 Afterwards make sure your package.json looks something like that:
 
 `package.json`
@@ -150,7 +156,8 @@ Afterwards make sure your package.json looks something like that:
     "@popperjs/core": "^2.11.5",
     "bootstrap": "^5.2.0-beta1",
     "bootstrap-icons": "^1.8.3",
-    "sass": "^1.52.2"
+    "sass": "^1.52.2",
+    "matestack-ui-bootstrap": "^3.1.0"
   },
   "scripts": {
     "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
@@ -159,14 +166,20 @@ Afterwards make sure your package.json looks something like that:
 
 ```
 
-Even if you use the importmap approach, this package.json will install the JavaScript packages into the node\_modules folder. They will not be used when following the importmap approach. Only the SCSS files will be used in this case.
+Even if you use the importmap approach, this package.json will install the JavaScript packages into the node\_modules folder. They will not be used when following the importmap approach. Only the (S)CSS files will be used in this case.
 
-And finally add the `matestack-ui-bootstrap.css` file to your layout via CDN. Alternatively you can download this file and let it be served via Sprockets.
+And finally adjust the `app/assets/stylesheets/application.bootstrap.scss` to look like:
 
-`app/views/layout.html.erb`
+```scss
+@import 'bootstrap/scss/bootstrap';
+@import 'matestack-ui-bootstrap/dist/matestack-ui-bootstrap';
 
-```markup
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/matestack-ui-bootstrap.css" rel="stylesheet" >
+```
+
+and run your server and css builder with
+
+```bash
+./bin/dev
 ```
 
 #### Option 2b : JSBundling-Rails + CSSBundling-Rails

docs/getting-started/installation-update/js-via-importmap.md

@@ -39,61 +39,4 @@ MatestackUiBootstrap.registerComponents(appInstance) // add this
 document.addEventListener('DOMContentLoaded', () => {
   MatestackUiVueJs.mount(appInstance)
 })
-
-```
-
-### (S)CSS setup
-
-#### Without cssbundling-rails
-
-`app/views/layout.html.erb`
-
-```markup
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/matestack-ui-bootstrap.css" rel="stylesheet" >
-
-<%= javascript_importmap_tags %>
 ```
-
-Please adjust the version numbers to your needs. They should match the JavaScript package versions used in the importmap config.
-
-#### With cssbundling-rails
-
-\--> In order to use SCSS features e.g. for Bootstrap theming&#x20;
-
-(without jsbundling-rails, using importmap approach for JavaScript assets instead in this guide)
-
-**Install cssbundling-rails**
-
-Like documented here: [https://github.com/rails/cssbundling-rails](https://github.com/rails/cssbundling-rails)
-
-```bash
-./bin/bundle add cssbundling-rails
-```
-
-```bash
-./bin/rails css:install:bootstrap
-```
-
-Afterwards make sure your package.json looks something like that:
-
-`package.json`
-
-```json
-{
-  "name": "your-app",
-  "private": "true",
-  "dependencies": {
-    "@popperjs/core": "^2.11.5",
-    "bootstrap": "^5.2.0-beta1",
-    "bootstrap-icons": "^1.8.3",
-    "sass": "^1.52.2"
-  },
-  "scripts": {
-    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
-  }
-}
-
-```
-
-This package.json will install all the JavaScript packages pinned via importmap config into the node\_modules folder. We just use the scss parts of it. Alternativel to the `importmap` approach, you could use `jsbundling-rails`

docs/getting-started/installation-update/js-via-jsbundling-rails.md

@@ -1,2 +1,13 @@
 # JS via JSBundling-Rails
 
+### Esbuild
+
+currently not fully supported
+
+### Rollup
+
+not tested yet
+
+### Webpack
+
+not tested yet -> docs for [webpacker](js-via-webpacker.md) should be helpful for setting things up