Fix modules, webpack 5, live/hot reloading.

config/twill.php

@@ -190,7 +190,7 @@
     'dev_mode' => env('TWILL_DEV_MODE', false),
     'dev_mode_url' => env('TWILL_DEV_MODE_URL', 'http://localhost:8080'),
     'public_directory' => env('TWILL_ASSETS_DIR', 'assets/twill'),
-    'manifest_file' => 'twill-manifest.json',
+    'manifest_file' => 'assets/twill/twill-manifest.json',
     'vendor_path' => 'vendor/area17/twill',
     'custom_components_resource_path' => 'assets/js/components',
     'vendor_components_resource_path' => 'assets/vendor/js/components',

frontend/js/components/Browser.vue

@@ -39,11 +39,12 @@
 
 <script>
   import { mapState } from 'vuex'
+
   import { BROWSER } from '@/store/mutations'
+  import FormDataAsObj from '@/utils/formDataAsObj.js'
 
   import a17Filter from './Filter.vue'
   import a17ItemList from './ItemList.vue'
-  import FormDataAsObj from '@/utils/formDataAsObj.js'
 
   export default {
     name: 'A17Browser',

frontend/js/components/BrowserField.vue

@@ -37,12 +37,13 @@
 </template>
 
 <script>
-  import { mapState, mapGetters } from 'vuex'
+  import draggable from 'vuedraggable'
+  import { mapGetters,mapState } from 'vuex'
+
+  import draggableMixin from '@/mixins/draggable'
   import { BROWSER } from '@/store/mutations'
 
   import Browseritem from './BrowserItem.vue'
-  import draggableMixin from '@/mixins/draggable'
-  import draggable from 'vuedraggable'
 
   export default {
     name: 'A17BrowserField',
@@ -157,7 +158,7 @@
       deleteItem: function (index) {
         this.$store.commit(BROWSER.DESTROY_ITEM, {
           name: this.name,
-          index: index
+          index
         })
       },
       openBrowser: function () {

frontend/js/components/Button.vue

@@ -321,7 +321,7 @@
   .button--ghost {
     height: $height_small_btn;
     line-height: $height_small_btn - 2px;
-    border-radius: $height_small_btn / 2;
+    border-radius: calc($height_small_btn / 2);
     background-color: transparent;
     border: 1px solid $color__border--hover;
     color: $color__text--light;

frontend/js/components/CheckboxAccordion.vue

@@ -7,10 +7,11 @@
 </template>
 
 <script>
-  import a17Accordion from './Accordion.vue'
   import VisibilityMixin from '@/mixins/toggleVisibility'
   import { LANGUAGE } from '@/store/mutations'
 
+  import a17Accordion from './Accordion.vue'
+
   export default {
     name: 'A17Checkboxaccordion',
     components: {

frontend/js/components/CheckboxGroup.vue

@@ -10,9 +10,10 @@
 
 <script>
   import isEqual from 'lodash/isEqual'
-  import InputframeMixin from '@/mixins/inputFrame'
+
   import CheckboxMixin from '@/mixins/checkboxes'
   import FormStoreMixin from '@/mixins/formStore'
+  import InputframeMixin from '@/mixins/inputFrame'
 
   export default {
     name: 'A17CheckboxGroup',

frontend/js/components/ColorField.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script>
-  import InputMixin from '@/mixins/input'
+  import ColorPicker from '@/components/ColorPicker'
   import FormStoreMixin from '@/mixins/formStore'
+  import InputMixin from '@/mixins/input'
   import InputframeMixin from '@/mixins/inputFrame'
-  import ColorPicker from '@/components/ColorPicker'
 
   export default {
     name: 'a17ColorField',

frontend/js/components/ColorPicker.vue

@@ -22,8 +22,8 @@
 
 <script>
 // Hightly inspired by https://github.com/xiaokaike/vue-color
-  import tinyColor from 'tinycolor2'
   import throttle from 'lodash/throttle'
+  import tinyColor from 'tinycolor2'
 
   export default {
     name: 'a17ColorPicker',
@@ -156,7 +156,7 @@
 
         if (this.currentColorHue !== h) {
           this.throttle(this.onChange, {
-            h: h,
+            h,
             s: this.currentColor.toHsl().s,
             l: this.currentColor.toHsl().l,
             a: this.currentColor.toHsl().a,

frontend/js/components/ConnectorField.vue

@@ -14,9 +14,9 @@
 </template>
 
 <script>
-  import isEqual from 'lodash/isEqual'
   import clone from 'lodash/clone'
-  import { mapState, mapGetters } from 'vuex'
+  import isEqual from 'lodash/isEqual'
+  import { mapGetters,mapState } from 'vuex'
 
   export default {
     name: 'A17ConnectorField',

frontend/js/components/Cropper.vue

@@ -21,13 +21,14 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import 'cropperjs/dist/cropper.min.css'
 
-  import a17VueFilters from '@/utils/filters.js'
   import CropperJs from 'cropperjs'
-  import 'cropperjs/dist/cropper.min.css'
+  import { mapState } from 'vuex'
+
   import cropperMixin from '@/mixins/cropper'
   import { cropConversion } from '@/utils/cropper'
+  import a17VueFilters from '@/utils/filters.js'
 
   export default {
     name: 'a17Cropper',
@@ -259,7 +260,7 @@
       color: $color__link;
       cursor: pointer;
       margin: 0 20px;
-      border-radius: $height_li / 2;
+      border-radius: calc($height_li / 2);
 
       &.s--active {
         color: $color__text;

frontend/js/components/DatePicker.vue

@@ -10,13 +10,15 @@
 </template>
 
 <script>
-  import randKeyMixin from '@/mixins/randKey'
-  import FormStoreMixin from '@/mixins/formStore'
-  import InputframeMixin from '@/mixins/inputFrame'
-  import { locales, getCurrentLocale, isCurrentLocale24HrFormatted } from '@/utils/locale'
-  import FlatPickr from 'flatpickr'
   import 'flatpickr/dist/flatpickr.css'
+
   import parse from 'date-fns/parse'
+  import FlatPickr from 'flatpickr'
+
+  import FormStoreMixin from '@/mixins/formStore'
+  import InputframeMixin from '@/mixins/inputFrame'
+  import randKeyMixin from '@/mixins/randKey'
+  import { getCurrentLocale, isCurrentLocale24HrFormatted,locales } from '@/utils/locale'
 
   export default {
     name: 'A17DatePicker',
@@ -236,7 +238,7 @@
     overflow:hidden;
     color: $color__background;
     background:$color__icons;
-    border-radius:#{$button-reset__width / 2};
+    border-radius:#{calc($button-reset__width / 2)};
     margin-top:13px;
     margin-right:13px;
     line-height:$button-reset__width;

frontend/js/components/Editor.vue

@@ -70,12 +70,11 @@
 </template>
 
 <script>
-  import { mapState, mapGetters } from 'vuex'
+  import { mapGetters,mapState } from 'vuex'
 
-  import A17EditorSidebar from '@/components/editor/EditorSidebar.vue'
-  import A17EditorPreview from '@/components/editor/EditorPreview.vue'
   import A17BlocksList from '@/components/blocks/BlocksList'
-
+  import A17EditorPreview from '@/components/editor/EditorPreview.vue'
+  import A17EditorSidebar from '@/components/editor/EditorSidebar.vue'
   import htmlClasses from '@/utils/htmlClasses'
 
   export default {

frontend/js/components/Filter.vue

@@ -25,6 +25,7 @@
 
 <script>
   import debounce from 'lodash/debounce'
+
   import FormDataAsObj from '@/utils/formDataAsObj.js'
 
   export default {

frontend/js/components/HiddenField.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-  import randKeyMixin from '@/mixins/randKey'
-  import InputMixin from '@/mixins/input'
   import FormStoreMixin from '@/mixins/formStore'
+  import InputMixin from '@/mixins/input'
+  import randKeyMixin from '@/mixins/randKey'
 
   export default {
     name: 'A17HiddenField',

frontend/js/components/ItemList.vue

@@ -57,9 +57,9 @@
 </template>
 
 <script>
-  import a17VueFilters from '@/utils/filters.js'
   import A17Avatar from '@/components/Avatar.vue'
   import mediaItemsMixin from '@/mixins/mediaLibrary/mediaItems'
+  import a17VueFilters from '@/utils/filters.js'
 
   export default {
     name: 'A17Itemlist',

frontend/js/components/LangManager.vue

@@ -27,12 +27,14 @@
 </template>
 
 <script>
-  import a17LangSwitcher from './LangSwitcher.vue'
-  import VisibilityMixin from '@/mixins/toggleVisibility'
+  import { mapGetters,mapState } from 'vuex'
+
   import LocaleMixin from '@/mixins/locale'
-  import { mapState, mapGetters } from 'vuex'
+  import VisibilityMixin from '@/mixins/toggleVisibility'
   import { LANGUAGE } from '@/store/mutations'
 
+  import a17LangSwitcher from './LangSwitcher.vue'
+
   export default {
     name: 'A17LangManager',
     mixins: [VisibilityMixin, LocaleMixin],

frontend/js/components/LangSwitcher.vue

@@ -12,8 +12,9 @@
 </template>
 
 <script>
-  import LocaleMixin from '@/mixins/locale'
   import { mapGetters } from 'vuex'
+
+  import LocaleMixin from '@/mixins/locale'
   import { LANGUAGE } from '@/store/mutations'
 
   export default {

frontend/js/components/LocaleField.vue

@@ -36,10 +36,10 @@
 </template>
 
 <script>
+  import cloneDeep from 'lodash/cloneDeep'
   import { mapState } from 'vuex'
-  import { LANGUAGE } from '@/store/mutations'
 
-  import cloneDeep from 'lodash/cloneDeep'
+  import { LANGUAGE } from '@/store/mutations'
 
   export default {
     name: 'A17Locale',
@@ -125,7 +125,7 @@
       updateValue: function (locale, newValue) {
         if (locale) {
           this.$emit('change', {
-            locale: locale,
+            locale,
             value: newValue
           })
         } else {

frontend/js/components/LocationField.vue

@@ -28,10 +28,11 @@
 </template>
 
 <script>
-  import isEqual from 'lodash/isEqual'
   import debounce from 'lodash/debounce'
-  import InputMixin from '@/mixins/input'
+  import isEqual from 'lodash/isEqual'
+
   import FormStoreMixin from '@/mixins/formStore'
+  import InputMixin from '@/mixins/input'
   import InputframeMixin from '@/mixins/inputFrame'
   import LocaleMixin from '@/mixins/locale'
   import { loadScript } from '@/utils/loader'
@@ -320,7 +321,7 @@
 
           // reverse geocoding
           geocoder.geocode({
-            location: location
+            location
           }, function (results, status) {
             if (status === 'OK') {
               if (results[1]) {

frontend/js/components/MediaField.vue

@@ -94,18 +94,16 @@
 </template>
 
 <script>
+  import smartCrop from 'smartcrop'
   import { mapState } from 'vuex'
 
-  import { MEDIA_LIBRARY } from '@/store/mutations'
-
   import a17Cropper from '@/components/Cropper.vue'
   import a17MediaMetadata from '@/components/MediaMetadata.vue'
-  import mediaLibrayMixin from '@/mixins/mediaLibrary/mediaLibrary.js'
   import mediaFieldMixin from '@/mixins/mediaField.js'
-
-  import a17VueFilters from '@/utils/filters.js'
+  import mediaLibrayMixin from '@/mixins/mediaLibrary/mediaLibrary.js'
+  import { MEDIA_LIBRARY } from '@/store/mutations'
   import { cropConversion } from '@/utils/cropper'
-  import smartCrop from 'smartcrop'
+  import a17VueFilters from '@/utils/filters.js'
 
   const IS_SAFARI = navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1
 

frontend/js/components/MediaFieldTranslated.vue

@@ -38,8 +38,8 @@
 </template>
 
 <script>
-  import localeMixin from '@/mixins/locale'
   import inputframeMixin from '@/mixins/inputFrame'
+  import localeMixin from '@/mixins/locale'
   import mediaFieldMixin from '@/mixins/mediaField.js'
 
   export default {

frontend/js/components/MediaMetadata.vue

@@ -38,6 +38,7 @@
 
 <script>
   import { mapState } from 'vuex'
+
   import { FORM } from '@/store/mutations'
 
   export default {
@@ -139,7 +140,7 @@
         if (!newDatas.locale) {
           const value = newDatas
           newDatas = {
-            value: value
+            value
           }
         }
 

frontend/js/components/Modal.vue

@@ -17,6 +17,7 @@
 
 <script>
   import { mapState } from 'vuex'
+
   import htmlClasses from '@/utils/htmlClasses'
 
   const html = document.documentElement

frontend/js/components/MultiSelect.vue

@@ -28,11 +28,12 @@
 
 <script>
   import isEqual from 'lodash/isEqual'
-  import randKeyMixin from '@/mixins/randKey'
-  import FormStoreMixin from '@/mixins/formStore'
-  import InputframeMixin from '@/mixins/inputFrame'
+
   import AttributesMixin from '@/mixins/addAttributes'
   import CheckboxMixin from '@/mixins/checkboxes'
+  import FormStoreMixin from '@/mixins/formStore'
+  import InputframeMixin from '@/mixins/inputFrame'
+  import randKeyMixin from '@/mixins/randKey'
 
   export default {
     name: 'A17Multiselect',

frontend/js/components/Overlay.vue

@@ -17,6 +17,7 @@
 
 <script>
   import { mapState } from 'vuex'
+
   import htmlClasses from '@/utils/htmlClasses'
 
   const html = document.documentElement
@@ -211,7 +212,7 @@
     background:transparent;
     height:$height__header;
     color:$color__text--light;
-    padding:#{($height__header - 16px) / 2 } 20px;
+    padding:#{calc(($height__header - 16px) / 2)} 20px;
     text-align:left;
 
     &:hover,