Merge pull request #57 from uicrooks/dev

v2.4.15

Author: sergejcodes

README.md

@@ -54,7 +54,7 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
   - [Bulma](#bulma)
 - [Swapping JavaScript framework](#swapping-javascript-framework)
   - [Removing Vue](#removing-vue)
-  - [React](#react)
+  - [Alpine.js](#alpinejs)
 - [Project structure](#project-structure)
 - [Tasks](#tasks)
 - [Development environment concepts](#development-environment-concepts)
@@ -95,7 +95,7 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
 - JavaScript
   - [Vue](https://vuejs.org)
   - [Vuex](https://vuex.vuejs.org)
-  - Swap Vue with any other framework e.g. [React](https://reactjs.org)
+  - Swap Vue with any other framework e.g. [Alpine.js](https://github.com/alpinejs/alpine)
   - [Axios](https://github.com/axios/axios)
   - Extend with [npm packages](https://www.npmjs.com) 📦
 - CSS
@@ -443,108 +443,24 @@ module: {
 }
 ```
 
-### React
+### Alpine.js
+If you want to use something lighter than Vue, a good alternative is [Alpine.js](https://github.com/alpinejs/alpine).
 
-1. Install packages:
+1. Install package:
 
 #### npm
 ```sh
-$ npm install react react-dom
-$ npm install @babel/preset-react --save-dev
+$ npm install alpinejs
 ```
 
 #### yarn
 ```sh
-$ yarn add react react-dom
-$ yarn add @babel/preset-react --dev
+$ yarn add alpinejs
 ```
 
-2. Inside [webpack.common.js](.config/webpack/webpack.common.js):
+2. Import `alpinejs` in [main.js](src/main.js):
 ```js
-...
-resolve: {
-  extensions: [... '.jsx'] // add jsx to extensions array
-}
-...
-```
-
-```js
-...
-module: {
-  rules: [
-    // add babel-loader for jsx,
-    // remove the same loader from webpack.prod.js
-    {
-      test: /\.(js|jsx)$/,
-      loader: 'babel-loader',
-      exclude: /node_modules/,
-      options: {
-        presets: [ '@babel/preset-env', '@babel/preset-react' ]
-      }
-    },
-    ...
-  ]
-}
-...
-```
-
-3. Add ecmaFeatures to [.eslint.js](config/.eslint.js):
-```js
-...
-parserOptions: {
-  ecmaVersion: 2020,
-  sourceType: 'module',
-  ecmaFeatures: { // add ecmaFeatures
-    jsx: true,
-    modules: true
-  }
-}
-...
-```
-
-4. Add following code to [main.js](src/main.js):
-```js
-// eslint-disable-next-line
-import React from 'react'
-import { render } from 'react-dom'
-
-/**
- * react components
- * auto-map all react components to dom elements
- */
-const reactComponents = require.context('./react/components/', true, /\.(jsx|js)$/)
-
-reactComponents.keys().forEach(key => {
-  const Component = reactComponents(key).default
-
-  // transform file name to PascalCase
-  const name = key.replace(/\.(\/|jsx|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())
-
-  const domElement = document.querySelector(`[react-component='${name}']`)
-  render(<Component/>, domElement)
-})
-```
-
-5. Create `src/react/components/MyComponent.jsx` with following content:
-```js
-import React from 'react'
-
-class MyComponent extends React.Component {
-  render() {
-    return(
-      <div>
-        My Component
-      </div>
-    )
-  }
-}
-
-export default MyComponent
-```
-
-6. Add a dom element to [theme.liquid](shopify/layout/theme.liquid) or any other `.liquid` file:
-```html
-<div react-component="MyComponent"></div>
+import 'alpinejs'
 ```
 <!-- swapping javascript framework (end) -->
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko <contact@sergej.codes>",
-  "version": "2.4.14",
+  "version": "2.4.15",
   "license": "MIT",
   "config": {
     "reloadr": {
@@ -44,7 +44,7 @@
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.1.2",
+    "css-loader": "^5.1.3",
     "css-minimizer-webpack-plugin": "^1.3.0",
     "eslint": "^7.22.0",
     "eslint-plugin-vue": "^7.7.0",
@@ -65,7 +65,7 @@
     "url-loader": "^4.1.1",
     "vue-loader": "^15.9.6",
     "vue-template-compiler": "^2.6.12",
-    "webpack": "^5.25.1",
+    "webpack": "^5.26.2",
     "webpack-cli": "^4.5.0",
     "webpack-merge": "^5.7.3"
   }