From 170257c50676d67abfca8736fcfabecfbbf35773 Mon Sep 17 00:00:00 2001 From: Erik Golinelli Date: Fri, 21 Jun 2024 20:53:41 +0200 Subject: [PATCH 1/3] cleanup env --- .eslintrc.js | 30 ----------------------- .prettierrc.js | 3 --- .stylelintrc | 3 --- babel.config.js | 10 -------- package.json | 32 ++++++++++++++++++------- tsconfig.json | 56 ++++++++++++------------------------------- tsconfig.types.json | 10 -------- vsge-mapbox-block.php | 9 ++++--- 8 files changed, 45 insertions(+), 108 deletions(-) delete mode 100644 .eslintrc.js delete mode 100644 .prettierrc.js delete mode 100644 .stylelintrc delete mode 100644 babel.config.js delete mode 100644 tsconfig.types.json diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index c083dec..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Set WordPress presets - */ - -const eslintConfig = { - extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ], -}; - -eslintConfig.parserOptions = { - ecmaVersion: 6, - env: { - jest: true, - es6: true - }, - babelOptions: { - presets: [ - '@wordpress/babel-preset-default', - '@babel/preset-typescript', - ], - globals: { - page: true, - browser: true, - context: true, - jestPuppeteer: true, - mapboxBlock: true - }, - }, -}; - -module.exports = eslintConfig; diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 51b8aeb..0000000 --- a/.prettierrc.js +++ /dev/null @@ -1,3 +0,0 @@ -// Import the default config file and expose it in the project root. -// Useful for editor integrations. -module.exports = require( '@wordpress/prettier-config' ); diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index 8b9eb42..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": [ "@wordpress/stylelint-config/scss" ] -} diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 0a761f8..0000000 --- a/babel.config.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = ( api ) => { - api.cache.using( () => process.env.NODE_ENV ); - - return { - presets: [ - '@babel/preset-typescript', - '@wordpress/babel-preset-default', - ], - }; -}; diff --git a/package.json b/package.json index 05d123d..f203cd8 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,9 @@ "scripts": { "packages-update": "wp-scripts packages-update", "build": "npm run build:scripts && npm run build:makepot", - "build:scripts": "wp-scripts build ./src/index ./src/frontend", + "build:scripts": "wp-scripts build", "build:makepot": "npx @wp-blocks/make-pot", - "start": "wp-scripts start ./src/index ./src/frontend", + "start": "wp-scripts start", "format": "wp-scripts format /src", "lint:css": "wp-scripts lint-style /src/style", "lint:js": "wp-scripts lint-js ./src", @@ -60,20 +60,36 @@ "babel-jest": "^29.5.0", "jest-puppeteer": "^8.0.6", "react-beautiful-dnd": "^13.1.1", - "typescript": "^5.4.5" + "typescript": "^5.4.5", + "classnames": "^2.5.1" }, "dependencies": { "@mapbox/maki": "^8.0.1", "@mapbox/mapbox-gl-geocoder": "^5.0.2", "@mapbox/mapbox-gl-language": "^1.0.1", "@turf/turf": "^6.5.0", - "classnames": "^2.5.1", "mapbox-gl": "^3.4.0" }, - "engines": { - "node": ">=16.0.0" - }, "browserslist": [ "extends @wordpress/browserslist-config" - ] + ], + "engines": { + "node": ">=18.0.0", + "npm": ">=7.0.0" + }, + "eslintConfig": { + "extends": [ + "plugin:@wordpress/eslint-plugin/recommended" + ], + "env": { + "browser": true, + "node": true + }, + "globals": { + "window": true, + "document": true, + "localStorage": true + } + }, + "prettier": "@wordpress/prettier-config" } diff --git a/tsconfig.json b/tsconfig.json index 3635fe2..edff199 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,49 +1,23 @@ { "compilerOptions": { - "target": "ESNext", - "module": "ESNext", + "target": "ES2022", + "module": "ES2022", "jsx": "react-jsx", - "lib": [ "esnext", "dom", "dom.iterable", "es2022" ], - // Search under node_modules for non-relative imports. "moduleResolution": "node", - "sourceMap": true, - - // Enable the strictest settings like strictNullChecks & noImplicitAny. - "strict": true, - - "allowSyntheticDefaultImports": true, - "skipLibCheck": true, - "strictNullChecks": true, - "resolveJsonModule": true, - "forceConsistentCasingInFileNames": true, - // Import non-ES modules as default imports."esModuleInterop": true, - - // Tells TypeScript to read JS files, as - // normally they are ignored as source files + // Search under node_modules for non-relative imports. "allowJs": true, - // Generate d.ts files - "declaration": true, - "declarationMap": true, - "declarationDir": "build/types", - "emitDeclarationOnly": true, - "pretty": true, - - // Types should go into this directory. - // Removing this would place the .d.ts files - // next to the .js files + // Process & infer types from .js files. + "noEmit": true, + // Don't emit; allow Babel to transform files. "outDir": "build", - "typeRoots": [ - "node_modules/@types", - "@types" - ], - "types": [ - "mapbox-gl", - "mapbox__mapbox-gl-geocoder", - "puppeteer", - "jest-environment-puppeteer", - "expect-puppeteer" - ] + "baseUrl": "src", + "allowSyntheticDefaultImports": true }, - "include": ["src/**/*", "block.json"], - "exclude": ["build","coverage"] + "include": [ + "./src/**/*" + ], + "exclude": [ + "coverage", + "docs" + ] } diff --git a/tsconfig.types.json b/tsconfig.types.json deleted file mode 100644 index 3871cd5..0000000 --- a/tsconfig.types.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "extends": "./tsconfig", - "compilerOptions": { - "target": "ESNext", - "module": "ESNext", - "jsx": "react-jsx", - "noEmit": false - }, - "exclude": ["**/*.test.ts"] -} diff --git a/vsge-mapbox-block.php b/vsge-mapbox-block.php index 4138017..c96cd3e 100644 --- a/vsge-mapbox-block.php +++ b/vsge-mapbox-block.php @@ -1,7 +1,7 @@ var mapboxBlockData = ' . json_encode(array('siteurl' => get_option('siteurl'), 'accessToken' => vsge_get_token(), 'language' => get_locale())) . ' '; } + add_action('wp_footer', 'vsge_mapbox_block_scripts'); add_action('admin_footer', 'vsge_mapbox_block_scripts'); From 7d76af3aac507b6386815cd45875a865059a5034 Mon Sep 17 00:00:00 2001 From: Erik Golinelli Date: Fri, 21 Jun 2024 20:55:56 +0200 Subject: [PATCH 2/3] decreases loading time and bundle size --- src/block.json | 8 +++---- src/components/Mapbox/MapboxContext.tsx | 3 ++- src/constants.ts | 2 +- src/frontend.tsx | 29 +++++++++++++------------ src/types.ts | 5 +++-- webpack.config.js | 24 +++++++++++++++++--- 6 files changed, 46 insertions(+), 25 deletions(-) diff --git a/src/block.json b/src/block.json index 7252c3e..138a0fe 100644 --- a/src/block.json +++ b/src/block.json @@ -114,9 +114,9 @@ } } }, - "viewScript": ["file:./vendors.js", "file:./frontend.js"], - "editorScript": ["file:./vendors.js", "file:./index.js"], - "editorStyle": ["file:./vendors.css","file:./index.css"], - "viewStyle": ["file:./vendors.css","file:./frontend.css"], + "viewScript": ["file:./vendor.js", "file:./frontend.js"], + "editorScript": ["file:./vendor.js", "file:./editor.js"], + "editorStyle": ["file:./vendor.css","file:./style-frontend.css", "file:./style-editor.css", "file:./editor.css"], + "viewStyle": ["file:./vendor.css","file:./style-frontend.css", "file:./frontend.css"], "render": "file:./render.php" } diff --git a/src/components/Mapbox/MapboxContext.tsx b/src/components/Mapbox/MapboxContext.tsx index 4a38ffb..9a5f0d1 100644 --- a/src/components/Mapbox/MapboxContext.tsx +++ b/src/components/Mapbox/MapboxContext.tsx @@ -10,7 +10,8 @@ import { MapBoxListing, MountedMapsContextValue, } from '../../types'; -import mapboxgl, { LngLat } from 'mapbox-gl'; +import type mapboxgl from 'mapbox-gl'; +import type { LngLat } from 'mapbox-gl'; import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; import type { MutableRefObject } from 'react'; import { __ } from '@wordpress/i18n'; diff --git a/src/constants.ts b/src/constants.ts index 8673f5f..268ec52 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -17,7 +17,7 @@ export const DEFAULT_COLOR_ALT = '#004a83'; export const ICON_SIZE: number = 36; // https://docs.mapbox.com/api/search/geocoding/#data-types export const DEFAULT_GEOCODER_TYPE_SEARCH: string = - 'country,region,postcode,place,locality,poi'; + 'country,region,district,postcode,place,locality,poi'; /** * Markers diff --git a/src/frontend.tsx b/src/frontend.tsx index fc0b329..ba66c43 100644 --- a/src/frontend.tsx +++ b/src/frontend.tsx @@ -21,20 +21,21 @@ export async function createMapRoot( attributes: MapAttributes ) { // initialize the map with React - await import( 'mapbox-gl' ).then( ( mapboxgl ) => { - const componentRoot = createRoot( el ); - componentRoot.render( - }> - - - - - ); - } ); + const mapboxgl = await import( + /* webpackChunkName: "mapbox" */ 'mapbox-gl' + ); + const componentRoot = createRoot( el ); + componentRoot.render( + }> + + + + + ); } /** diff --git a/src/types.ts b/src/types.ts index c1babc8..a890bb5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,12 +1,13 @@ import type { Feature, Geometry } from '@turf/turf'; -import mapboxgl, { LngLat } from 'mapbox-gl'; +import type mapboxgl from 'mapbox-gl'; +import type { LngLat } from 'mapbox-gl'; import type { Dispatch, MutableRefObject, RefObject, SetStateAction, } from 'react'; -import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; +import type MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'; export type CoordinatesDef = [ number, number ]; diff --git a/webpack.config.js b/webpack.config.js index e0f7047..e45d7fa 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,16 +3,34 @@ const path = require( 'path' ); module.exports = { ...defaultConfig, + entry: { + frontend: './src/frontend.tsx', + editor: './src/index.tsx', + }, + module: { + ...defaultConfig.module, + rules: [ + ...defaultConfig.module.rules, + { test: /\.geojson$/, type: 'json' }, + ], + }, optimization: { ...defaultConfig.optimization, splitChunks: { + ...defaultConfig.optimization.splitChunks, cacheGroups: { - commons: { - test: /[\\/]node_modules[\\/]/, - name: 'vendors', + ...defaultConfig.optimization.splitChunks.cacheGroups, + vendor: { + test: /[\\/]node_modules[\\/](mapbox-gl|@mapbox|@turf)[\\/]/, + name: 'vendor', chunks: 'all', }, }, }, }, + externals: { + react: 'react', + 'react-dom': 'reactDOM', + '@wordpress/element': 'element', + }, }; From f78b584c41ebfe30238b883fd41435e397a04e5c Mon Sep 17 00:00:00 2001 From: Erik Golinelli Date: Fri, 21 Jun 2024 20:57:13 +0200 Subject: [PATCH 3/3] enhanced language detection --- src/components/Mapbox/init.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Mapbox/init.tsx b/src/components/Mapbox/init.tsx index fbd7f5e..d674865 100644 --- a/src/components/Mapbox/init.tsx +++ b/src/components/Mapbox/init.tsx @@ -60,7 +60,7 @@ export function initMap( if ( map.getLayer( 'country-label' ) ) { map.setLayoutProperty( 'country-label', 'text-field', [ 'get', - 'name_' + defaults?.language?.substring( 0, 2 ) || 'en', + 'name_' + defaults.language || 'en', ] ); }