Merge branch 'feature/add-polyfill-for-intersection-observer' into 'master'

Fix build on Safari and improve js build Closes #246 See merge request framasoft/mobilizon!283
3 years ago · ddd9d44da1
parent 166696c7dd 63a839d8aa
commit ddd9d44da1
13 changed files with 1345 additions and 866 deletions
--- a/.gitignore
+++ b/.gitignore
@ -17,7 +17,7 @@ erl_crash.dump

 .env.production
 .env.test
-.env
+/.env
 .env.2

 setup_db.psql
--- a/js/.babelrc
+++ b/js/.babelrc
@ -1,5 +0,0 @@
-{
-  "presets": [
-    "@vue/app"
-  ]
-}
--- a/js/.env
+++ b/js/.env
@ -0,0 +1 @@
+VUE_APP_INJECT_COMMENT = <meta name="server-injected-data" />
--- a/js/.gitignore
+++ b/js/.gitignore
@ -27,4 +27,3 @@ yarn-error.log*
 *.sln
 *.sw*

-.env
--- a/js/babel.config.js
+++ b/js/babel.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    [
+        "@vue/app", {useBuiltIns: "entry"}
+    ]
+  ]
+};
--- a/js/package.json
+++ b/js/package.json
@ -4,7 +4,7 @@
  "license": "AGPL-3.0",
  "private": true,
  "scripts": {
-    "build": "vue-cli-service build",
+    "build": "vue-cli-service build --modern",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
@ -24,6 +24,7 @@
    "buefy": "^0.8.2",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
+    "intersection-observer": "^0.7.0",
    "leaflet": "^1.4.0",
    "lodash": "^4.17.11",
    "ngeohash": "^0.6.3",
@ -45,12 +46,13 @@
    "@types/leaflet": "^1.5.2",
    "@types/lodash": "^4.14.141",
    "@types/mocha": "^5.2.6",
-    "@vue/cli-plugin-babel": "^3.6.0",
-    "@vue/cli-plugin-e2e-cypress": "^4.0.0-rc.7",
-    "@vue/cli-plugin-pwa": "^3.6.0",
-    "@vue/cli-plugin-typescript": "^3.6.0",
-    "@vue/cli-plugin-unit-mocha": "^3.6.0",
-    "@vue/cli-service": "^3.6.0",
+    "@vue/cli-plugin-babel": "^4.0.3",
+    "@vue/cli-plugin-e2e-cypress": "^4.0.3",
+    "@vue/cli-plugin-pwa": "^4.0.3",
+    "@vue/cli-plugin-router": "^4.0.3",
+    "@vue/cli-plugin-typescript": "^4.0.3",
+    "@vue/cli-plugin-unit-mocha": "^4.0.3",
+    "@vue/cli-service": "^4.0.3",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "apollo-link-error": "^1.1.12",
@ -63,7 +65,7 @@
    "tslint": "^5.20.0",
    "tslint-config-airbnb": "^5.11.2",
    "typescript": "^3.6.3",
-    "vue-cli-plugin-styleguidist": "^3.24.2",
+    "vue-cli-plugin-styleguidist": "^3.25.0",
    "vue-cli-plugin-webpack-bundle-analyzer": "^1.3.0",
    "vue-i18n-extract": "^1.0.2",
    "vue-svg-inline-loader": "^1.3.0",
@ -72,7 +74,7 @@
  },
  "browserslist": [
    ">0.25%",
-    "not ie 11",
+    "ie 11",
    "not op_mini all"
  ],
  "engines": {
--- a/js/public/index.html
+++ b/js/public/index.html
@ -6,7 +6,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <!--server-generated-meta-->
+  <%= VUE_APP_INJECT_COMMENT %>
 </head>

 <body>
--- a/js/src/App.vue
+++ b/js/src/App.vue
@ -99,9 +99,10 @@ $mdi-font-path: "~@mdi/font/fonts";
  body {
    // background: #f7f8fa;
    background: #ebebeb;
+    font-family: BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;

    main {
-      margin: 1rem auto;
+      margin: 1rem auto 0;
    }
  }

--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@ -277,7 +277,7 @@ import {
    EventVisibility,
    IEvent, ParticipantRole,
  } from '@/types/event.model';
-import { CURRENT_ACTOR_CLIENT, IDENTITIES, LOGGED_USER_DRAFTS, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT, LOGGED_USER_DRAFTS, LOGGED_USER_PARTICIPATIONS } from '@/graphql/actor';
 import { IPerson, Person } from '@/types/actor';
 import PictureUpload from '@/components/PictureUpload.vue';
 import EditorComponent from '@/components/Editor.vue';
@ -289,6 +289,7 @@ import AddressAutoComplete from '@/components/Event/AddressAutoComplete.vue';
 import { buildFileFromIPicture, buildFileVariable, readFileAsync } from '@/utils/image';
 import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
 import { RouteName } from '@/router';
+import 'intersection-observer';

@Component({
  components: { IdentityPickerWrapper, AddressAutoComplete, TagInput, DateTimePicker, PictureUpload, Editor: EditorComponent },
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@ -1,6 +1,3 @@
-import {ParticipantRole} from "@/types/event.model";
-import {ParticipantRole} from "@/types/event.model";
-import {ParticipantRole} from "@/types/event.model";
 <template>
    <main class="container">
        <b-tabs type="is-boxed" v-if="event" v-model="activeTab">
--- a/js/vue.config.js
+++ b/js/vue.config.js
@ -1,6 +1,3 @@
-const Dotenv = require('dotenv-webpack');
-const path = require('path');
-
 module.exports = {
  pluginOptions: {
    webpackBundleAnalyzer: {
@ -11,9 +8,6 @@ module.exports = {
  runtimeCompiler: true,
  outputDir: '../priv/static',
  configureWebpack: {
-    plugins: [
-      new Dotenv({ path: path.resolve(process.cwd(), '../.env') }),
-    ],
    module: {
      rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
        {
@ -28,19 +22,14 @@ module.exports = {
    }
  },
  chainWebpack: config => {
-    config
-        .plugin('html')
-        .tap(args => {
-          args[0].minify = {
-            collapseWhitespace: true,
-            removeComments: false,
-            removeRedundantAttributes: true,
-            removeScriptTypeAttributes: true,
-            removeStyleLinkTypeAttributes: true,
-            useShortDoctype: true
-          };
-          return args
-        });
+    // config
+    //     .plugin('html')
+    //     .tap(args => {
+    //       args[0].minify = {
+    //         removeComments: false,
+    //       };
+    //       return args
+    //     });

    config.module
        .rule("vue")
--- a/js/yarn.lock
+++ b/js/yarn.lock
--- a/lib/mobilizon_web/views/page_view.ex
+++ b/lib/mobilizon_web/views/page_view.ex
@ -74,7 +74,7 @@ defmodule MobilizonWeb.PageView do
      when page in ["actor.html", "event.html", "comment.html"] do
    with {:ok, index_content} <- File.read(index_file_path()) do
      tags = object |> Metadata.build_tags() |> MetadataUtils.stringify_tags()
-      index_content = String.replace(index_content, "<!--server-generated-meta-->", tags)
+      index_content = String.replace(index_content, "<meta name=server-injected-data>", tags)
      {:safe, index_content}
    end
  end
@ -82,7 +82,7 @@ defmodule MobilizonWeb.PageView do
  def render("index.html", _assigns) do
    with {:ok, index_content} <- File.read(index_file_path()) do
      tags = Instance.build_tags() |> MetadataUtils.stringify_tags()
-      index_content = String.replace(index_content, "<!--server-generated-meta-->", tags)
+      index_content = String.replace(index_content, "<meta name=server-injected-data>", tags)
      {:safe, index_content}
    end
  end
				`@ -0,0 +1 @@`
				`VUE_APP_INJECT_COMMENT = <meta name="server-injected-data" />`