Merge pull request #9477 from camptocamp/scss-dist

Make package easier to use

.github/workflows/main.yaml

@@ -164,12 +164,6 @@ jobs:
       - run: npm run doc -- srcapi/store/config.ts --json dist/typedoc.json
       - run: npm run doc
       - run: npm run build-api
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
-      - run: npm run dist
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
-      - run: npm run dist-spinner
 
       - uses: actions/upload-artifact@v4
         with:

.npmignore

@@ -24,3 +24,10 @@
 /cypress
 **.spec.ts
 /tsconfig*.json
+/apidocs
+/cypress.config.ts
+/eslint.config.mjs
+/locales/
+/svgo.js
+/typedoc.json
+/webpack.config.js

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type {StorybookConfig} from '@storybook/web-components-webpack5';
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
@@ -27,6 +28,7 @@ const config: StorybookConfig = {
     const mergedConfig = {
       ...config,
       module: {...config.module, rules: projectConfig.module.rules},
+      plugins: [...config.plugins, new MiniCssExtractPlugin()],
       resolve: {
         ...config.resolve,
         alias: {

Makefile

@@ -20,7 +20,7 @@ GMF_EXAMPLES_JS_FILES := $(GMF_EXAMPLES_HTML_FILES:.html=.js)
 
 GMF_APPS += mobile desktop desktop_alt iframe_api mobile_alt oeedit
 GMF_APPS_JS_FILES = $(shell find contribs/gmf/apps/ -type f -name '*.js') $(shell find contribs/gmf/apps/ -type f -name '*.ts')
-BUILD_JS_FILES = $(shell ls -1 *.js) $(shell ls -1 utils/*.js) $(shell find buildtools/ -type f -name '*.js') $(shell find cypress/ -type f -name '*.js')
+BUILD_JS_FILES = $(shell ls -1 *.js) $(shell find buildtools/ -type f -name '*.js') $(shell find cypress/ -type f -name '*.js')
 GMF_APPS_PARTIALS_FILES = $(shell find contribs/gmf/apps/ -type f -name '*.html' -or -name '*.html.ejs')
 GMF_APPS_ALL_FILES = $(shell find contribs/gmf/apps/ -type f) $(NGEO_ALL_SRC_FILES)
 

buildtools/extract-ngeo-dependencies

@@ -51,12 +51,13 @@ all_required_js = {a for a in all_required_js if not a.startswith("./")}
 all_required_js = {a for a in all_required_js if not a.startswith("ngeo/")}
 all_required_js = {a for a in all_required_js if not a.startswith("gmf/")}
 all_required_js = {a for a in all_required_js if not a.startswith("gmfapi/")}
-all_required_js = {a for a in all_required_js if not a.startswith("goog/")}
 all_required_js = {a for a in all_required_js if not a.startswith("olcs/")}
 all_required_js = {a for a in all_required_js if not a.startswith("jsts/")}
 all_required_js = {a for a in all_required_js if not a.startswith("mapillary-js/")}
 all_required_js = {
-    a for a in all_required_js if a not in ("corejs-typeahead", "angular-float-thead", "moment")
+    a
+    for a in all_required_js
+    if a not in ("corejs-typeahead", "angular-float-thead", "moment", "mapillary-js", "jsts", "olsc")
 }
 all_required_js = {a for a in all_required_js if not a.endswith(".css")}
 for js in sorted(all_required_js):

buildtools/webpack.commons.js

@@ -21,7 +21,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
-const {PromiseTask} = require('event-hooks-webpack-plugin/lib/tasks');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
 
@@ -85,13 +85,13 @@ module.exports = function (config) {
 
   rules.push({
     test: /\.css$/,
-    use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
+    use: [{loader: MiniCssExtractPlugin.loader}, {loader: 'css-loader'}],
   });
 
   rules.push({
     test: /\.s[ac]ss$/i,
     use: [
-      {loader: 'style-loader'},
+      {loader: MiniCssExtractPlugin.loader},
       {loader: 'css-loader'},
       {loader: 'sass-loader', options: {warnRuleAsWarning: false}},
     ],
@@ -141,6 +141,9 @@ module.exports = function (config) {
       resourceRegExp: /^\.\/locale$/,
       contextRegExp: /node_modules\/moment\/src\/lib\/locale$/,
     }),
+    new MiniCssExtractPlugin({
+      filename: '[name]-[contenthash:6].css',
+    }),
   ];
   if (config.nodll != true) {
     plugins.push(dllPlugin);
@@ -173,11 +176,7 @@ module.exports = function (config) {
         api: path.resolve(__dirname, '../api/src'),
         lib: path.resolve(__dirname, '../lib'),
         gmf: path.resolve(__dirname, '../src'),
-        jsts: 'jsts/org/locationtech/jts',
-        olcs: 'ol-cesium/src/olcs',
         'jquery-ui/datepicker': 'jquery-ui/ui/widgets/datepicker', // For angular-ui-date
-        // required to make it working with types
-        'typeahead': 'corejs-typeahead',
       },
     },
     optimization: {

buildtools/webpack.dist.js

@@ -19,10 +19,26 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const plugins = [];
+const entry = {};
+
+for (const name of ['desktop', 'mobile', 'iframe_api']) {
+  const folder = `contribs/gmf/apps/${name}`;
+  entry[name] = `./${folder}/Controller.js`;
+  plugins.push(
+    new HtmlWebpackPlugin({
+      template: `${folder}/index.html.ejs`,
+      inject: false,
+      filename: `${name}.html`,
+      chunks: [name],
+    }),
+  );
+}
+
 module.exports = {
-  entry: {
-    desktop: './contribs/gmf/apps/desktop_alt/Controller.js',
-    mobile: './contribs/gmf/apps/mobile_alt/Controller.js',
-    iframe_api: './contribs/gmf/apps/iframe_api/Controller.js',
-  },
+  entry: entry,
+  plugins: plugins,
 };

buildtools/webpack.prod.js

@@ -27,7 +27,7 @@ module.exports = function () {
     mode: 'production',
     devtool: 'source-map',
     output: {
-      filename: '[name].[chunkhash:6].js',
+      filename: '[name]-[chunkhash:6].js',
       assetModuleFilename: '[name]-[contenthash:6][ext]',
     },
     plugins: [new webpack.optimize.ModuleConcatenationPlugin()],

contribs/gmf/apps/desktop_alt/sass/desktop_alt.scss

@@ -23,7 +23,7 @@
 
 @import './vars_desktop_alt.scss';
 @import 'gmf/controllers/desktop.scss';
-@import '~mapillary-js/dist/mapillary.css';
+@import 'mapillary-js';
 
 html {
   body {

examples/mapillarystreetview.scss

@@ -1,5 +1,5 @@
 @import './common_styles.scss';
-@import 'mapillary-js/dist/mapillary.css';
+@import 'mapillary-js';
 
 ngeo-streetview {
   display: block;