Merge pull request #20 from fullpipe/add-inline

Add inline
fullpipe · Oct 21, 2020 · c08d338 · c08d338
2 parents 7220bd7 + cccfda5
commit c08d338
Show file tree

Hide file tree

Showing 24 changed files with 265 additions and 163 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -1,4 +1,4 @@
-name: PHP Composer
+name: Tests
 
 on:
   push:
@@ -7,7 +7,7 @@ on:
     branches: [ master ]
 
 jobs:
-  build:
+  tests:
 
     runs-on: ubuntu-latest
 

diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .idea/
 composer.lock
 vendor/
-build/
-.phpunit.result.cache
+example/public/build/
+.phpunit.result.cache
diff --git a/README.md b/README.md
@@ -3,8 +3,9 @@
 [![Latest Version on Packagist](https://img.shields.io/github/release/fullpipe/twig-webpack-extension.svg)](https://packagist.org/packages/fullpipe/twig-webpack-extension)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)
 [![Total Downloads](https://img.shields.io/packagist/dt/fullpipe/twig-webpack-extension.svg)](https://packagist.org/packages/fullpipe/twig-webpack-extension/stats)
+[![Tests](https://github.com/fullpipe/twig-webpack-extension/workflows/Tests/badge.svg)](https://github.com/fullpipe/twig-webpack-extension/actions)  
 
-> Inject your webpack entry points into twig templates with easy.
+Inject your webpack entry points into twig templates with easy.
 
 This repo provides a Twig extension that joins Webpack resultant files with Twig template engine in an easy way.
 
@@ -13,50 +14,48 @@ This approach allows the dynamic insertion of the css stylesheets and js scripts
 > Also works well with **extract-text-webpack-plugin**
 
 ## Install
+
 ```bash
-$ composer require fullpipe/twig-webpack-extension
+composer require fullpipe/twig-webpack-extension
 ```
 
 ### Set up Webpack
+
 You need to install the `webpack-manifest-plugin`
 ```bash
-$ npm install webpack-manifest-plugin --save-dev
+npm install webpack-manifest-plugin --save
+```
 
-# or with Yarn
-$ yarn add webpack-manifest-plugin --dev
+or with Yarn
+```bash
+yarn add webpack-manifest-plugin
 ```
 
 Configure `webpack.config.js`
 ```js
 // webpack.config.js
 
 var ManifestPlugin = require('webpack-manifest-plugin');
-
-(...)
+const path = require("path");
 
 module.exports = {
-
-  (...)
-
+  ...
   entry: {
     vendor: ["jquery", "lodash"],
     main: './src/main.js'
   },
   output: {
-    (...)
-    path: './js'
-    publicPath: '/',    // required
-
-    (...)
+    ...
+    filename: "js/[name].js",
+    path: path.resolve(__dirname, "../public/build"),
+    publicPath: '/build/', // required
   },
   plugins: [
     new ManifestPlugin(),
     new ExtractTextPlugin({
-      filename: './../css/[name].css',
-      publicPath: '/'
+      filename: "css/[name].css",
+      publicPath: "/build/",
     }),
-
-  (...)
   ]
 }
 ```
@@ -67,22 +66,16 @@ module.exports = {
 # app/config/services.yml
 
 parameters:
-    (...)
-
-    webpack.manifest: "%kernel.root_dir%/../web/build/manifest.json" #should be absolute
-    webpack.public_path_js: /js/
-    webpack.public_path_css: /css/
+    webpack.manifest: "%kernel.root_dir%/../public/build/manifest.json" #should be absolute
+    webpack.public_dir: "%kernel.root_dir%/../public" #your public-dir
 
 services:
-    (...)
-
     twig_extension.webpack:
         class: Fullpipe\TwigWebpackExtension\WebpackExtension
         public: false
         arguments:
             - "%webpack.manifest%"
-            - "%webpack.public_path_js%"
-            - "%webpack.public_path_css%"
+            - "%webpack.public_dir%"
         tags:
             - { name: twig.extension }
 ```
@@ -92,29 +85,21 @@ services:
 ```twig
 {# app/Resources/views/base.html.twig #}
 
-(...)
-
 <head>
-(...)
-
+    ...
     {% webpack_entry_css 'main' %}
+    {% webpack_entry_css 'inline' inline %}
 </head>
 
 <body>
-(...)
-
+    ...
     {% webpack_entry_js 'vendor' %}
-    {% webpack_entry_js 'main' %}
+    {% webpack_entry_js 'main' defer %}
+    {% webpack_entry_js 'second' async %}
+    {% webpack_entry_js 'inline' inline %}
 </body>
 ```
 
-or user `defer/async`
-
-```twig
-  {% webpack_entry_js 'main' defer %}
-  {% webpack_entry_js 'not_main' async %}
-```
-
 ### Example
 
 See working [example](example) with [webpack.config.js](example/frontend/webpack.config.js).
@@ -125,25 +110,19 @@ If you use `[hash]` or `[chunkhash]`:
 
 ```js
 // webpack.config.js
-
-(...)
-
+...
 output: {
-  (...)
-
+  ...
   filename: '[name].[chunkhash].js',
   chunkFilename: '[name].[chunkhash].js'
 },
 plugins: [
-  (...)
-
   new ExtractTextPlugin({
-    filename: './../css/[name].[contenthash].css',
-    publicPath: '/'
+    ...
+    filename: 'css/[name].[contenthash].css',
   }),
-
-  (...)
 ]
 ```
 
-> You should clear twig cache after each webpack compilation. So for dev environment do not use `[hash]` or `[chunkhash]`.
+You should clear twig cache after each webpack compilation.  
+So for dev environment do not use `[hash]` or `[chunkhash]`.
diff --git a/example/composer.json b/example/composer.json
@@ -1,11 +1,12 @@
 {
+  "description": "",
   "type": "project",
   "license": "proprietary",
   "require": {
     "php": "^7.1.3",
     "ext-ctype": "*",
     "ext-iconv": "*",
-    "fullpipe/twig-webpack-extension": "dev-master",
+    "fullpipe/twig-webpack-extension": "dev-add-inline",
     "symfony/console": "4.4.*",
     "symfony/dotenv": "4.4.*",
     "symfony/flex": "^1.3.1",

diff --git a/example/config/services.yaml b/example/config/services.yaml
@@ -1,27 +1,16 @@
-# This file is the entry point to configure your own services.
-# Files in the packages/ subdirectory configure your dependencies.
-
-# Put parameters here that don't need to change on each machine where the app is deployed
-# https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
 parameters:
     webpack.manifest: "%kernel.root_dir%/../public/build/manifest.json" #should be absolute
-    webpack.public_path_js: ""
-    webpack.public_path_css: ""
+    webpack.public_dir: "%kernel.root_dir%/../public"
 
 services:
-    # default configuration for services in *this* file
     _defaults:
-        autowire: true      # Automatically injects dependencies in your services.
-        autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
+        autowire: true
+        autoconfigure: true
 
-    # makes classes in src/ available to be used as services
-    # this creates a service per class whose id is the fully-qualified class name
     App\:
         resource: '../src/*'
         exclude: '../src/{DependencyInjection,Entity,Migrations,Tests,Kernel.php}'
 
-    # controllers are imported separately to make sure services can be injected
-    # as action arguments even if you don't extend any base controller class
     App\Controller\:
         resource: '../src/Controller'
         tags: ['controller.service_arguments']
@@ -31,9 +20,6 @@ services:
         public: false
         arguments:
             - "%webpack.manifest%"
-            - "%webpack.public_path_js%"
-            - "%webpack.public_path_css%"
+            - "%webpack.public_dir%"
         tags:
             - { name: twig.extension }
-    # add more service definitions when explicit configuration is needed
-    # please note that last definitions always *replace* previous ones
diff --git a/example/frontend/src/index.css b/example/frontend/src/index.css
@@ -14,3 +14,7 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+div.second {
+  color: bisque;
+}
diff --git a/example/frontend/src/index.js b/example/frontend/src/index.js
@@ -4,13 +4,8 @@ import _ from "lodash";
 import $ from "jquery";
 
 $(() => {
-  const $element = $("<div></div>");
+  const $element = $(`<div class="index"></div>`);
 
   $element.text(_.join(["Hello", "from", "index.js"], " "));
-  $element
-    .hide()
-    .appendTo($(".content"))
-    .fadeIn("slow");
-
-  //   $("body").append($element);
+  $element.hide().appendTo($(".content")).fadeIn("slow");
 });
diff --git a/example/frontend/src/inline.css b/example/frontend/src/inline.css
@@ -0,0 +1,3 @@
+div.inline {
+  color: aquamarine;
+}
diff --git a/example/frontend/src/inline.js b/example/frontend/src/inline.js
@@ -0,0 +1,9 @@
+import "./inline.css";
+import $ from "jquery";
+
+$(() => {
+  const $element = $(`<div class="inline"></div>`);
+
+  $element.text(_.join(["Hello", "from", "inline.js"], " "));
+  $element.hide().appendTo($(".content")).fadeIn("slow");
+});
diff --git a/example/frontend/src/second.js b/example/frontend/src/second.js
@@ -0,0 +1,8 @@
+import $ from "jquery";
+
+$(() => {
+  const $element = $(`<div class="second"></div>`);
+
+  $element.text(_.join(["Hello", "from", "second.js"], " "));
+  $element.hide().appendTo($(".content")).fadeIn("slow");
+});
diff --git a/example/frontend/webpack.config.js b/example/frontend/webpack.config.js
@@ -6,33 +6,35 @@ const ExtractTextPlugin = require("extract-text-webpack-plugin");
 module.exports = {
   entry: {
     vendor: ["jquery", "lodash"],
-    main: "./src/index.js"
+    main: "./src/index.js",
+    second: "./src/second.js",
+    inline: "./src/inline.js",
   },
   output: {
-    filename: "js/[name].js",
+    filename: "js/[name].[chunkhash].js",
     path: path.resolve(__dirname, "../public/build"),
-    publicPath: "/build/"
+    publicPath: "/build/",
   },
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({
       name: "vendor",
-      minChunks: Infinity
+      minChunks: Infinity,
     }),
     new ManifestPlugin(),
     new ExtractTextPlugin({
-      filename: "css/[name].css",
-      publicPath: "/build/"
-    })
+      filename: "css/[name].[chunkhash].css",
+      publicPath: "/build/",
+    }),
   ],
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ExtractTextPlugin.extract({
           fallback: "style-loader",
-          use: "css-loader"
-        })
-      }
-    ]
-  }
+          use: "css-loader",
+        }),
+      },
+    ],
+  },
 };
diff --git a/example/symfony.lock b/example/symfony.lock
@@ -92,6 +92,9 @@
             "src/Kernel.php"
         ]
     },
+    "symfony/http-client-contracts": {
+        "version": "v2.3.1"
+    },
     "symfony/http-foundation": {
         "version": "v4.4.3"
     },
@@ -104,6 +107,9 @@
     "symfony/polyfill-intl-idn": {
         "version": "v1.13.1"
     },
+    "symfony/polyfill-intl-normalizer": {
+        "version": "v1.18.1"
+    },
     "symfony/polyfill-mbstring": {
         "version": "v1.13.1"
     },
@@ -113,6 +119,9 @@
     "symfony/polyfill-php73": {
         "version": "v1.13.1"
     },
+    "symfony/polyfill-php80": {
+        "version": "v1.18.1"
+    },
     "symfony/routing": {
         "version": "4.2",
         "recipe": {

diff --git a/example/templates/base.html.twig b/example/templates/base.html.twig
@@ -4,15 +4,17 @@
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
         {% block stylesheets %}
-
             {% webpack_entry_css 'main' %}
+            {% webpack_entry_css 'inline' inline %}
         {% endblock %}
     </head>
     <body>
         {% block body %}{% endblock %}
         {% block javascripts %}
-            {% webpack_entry_js 'vendor' defer %}
+            {% webpack_entry_js 'vendor' %}
             {% webpack_entry_js 'main' defer %}
+            {% webpack_entry_js 'second' async %}
+            {% webpack_entry_js 'inline' inline %}
         {% endblock %}
     </body>
 </html>