V1.0.1

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"
 }

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"
 }

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';

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',
 			] );
 		}
 

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

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(
-			<Suspense fallback={ <Loader wrapperHeight={ '50vh' } /> }>
-				<MapProvider attributes={ attributes }>
-					<MapBox
-						mapboxgl={ mapboxgl.default }
-						attributes={ attributes }
-						mapDefaults={ getMapDefaults() }
-					/>
-				</MapProvider>
-			</Suspense>
-		);
-	} );
+	const mapboxgl = await import(
+		/* webpackChunkName: "mapbox" */ 'mapbox-gl'
+	);
+	const componentRoot = createRoot( el );
+	componentRoot.render(
+		<Suspense fallback={ <Loader wrapperHeight={ '50vh' } /> }>
+			<MapProvider attributes={ attributes }>
+				<MapBox
+					mapboxgl={ mapboxgl.default }
+					attributes={ attributes }
+					mapDefaults={ getMapDefaults() }
+				/>
+			</MapProvider>
+		</Suspense>
+	);
 }
 
 /**

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 ];
 

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"
+  ]
 }

vsge-mapbox-block.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Plugin Name: vsge-mapbox-block
- * Version: 1.0.0
+ * Version: 1.0.1
  * Description: VSGE - mapbox block
  * Author:            codekraft
  * Text Domain:       vsge-mapbox-block
@@ -21,7 +21,8 @@
  *
  * @return string
  */
-function vsge_get_token(): string {
+function vsge_get_token(): string
+{
 	if (defined('MAPBOX_TOKEN')) {
 		return apply_filters('vsge_mapbox_block_key', MAPBOX_TOKEN);
 	}
@@ -33,8 +34,10 @@ function vsge_get_token(): string {
  *
  * @return void
  */
-function vsge_mapbox_block_scripts(): void {
+function vsge_mapbox_block_scripts(): void
+{
 	echo '<script id="vsge-mapbox-block-data">var mapboxBlockData = ' . json_encode(array('siteurl' => get_option('siteurl'), 'accessToken' => vsge_get_token(), 'language' => get_locale())) . ' </script>';
 }
+
 add_action('wp_footer', 'vsge_mapbox_block_scripts');
 add_action('admin_footer', 'vsge_mapbox_block_scripts');

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',
+	},
 };