FSE on WP.com: Initial explorations

.circleci/config.yml

@@ -324,7 +324,9 @@ jobs:
       - prepare
       - run:
           name: TypeScript strict typecheck of individual subprojects
-          command: yarn run tsc --project client/landing/gutenboarding
+          command: |
+            yarn run tsc --project client/landing/custom-editor
+              && yarn run tsc --project client/landing/gutenboarding
 
   lint:
     <<: *defaults

client/landing/custom-editor/index.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import config from '../../config';
+import { initialize } from '@wordpress/edit-site';
+
+/**
+ * Internal dependencies
+ */
+import './utils';
+
+window.AppBoot = () => {
+	if ( ! config.isEnabled( 'custom-editor' ) ) {
+		window.location.href = '/';
+	} else {
+		initialize( 'wpcom', {} );
+	}
+};

client/landing/custom-editor/section.ts

@@ -0,0 +1,8 @@
+export const CUSTOM_EDITOR_SECTION_DEFINITION = {
+	name: 'custom-editor',
+	paths: [ '/custom-editor' ],
+	module: 'custom-editor',
+	secondary: false,
+	group: 'custom-editor',
+	enableLoggedOut: true,
+};

client/landing/custom-editor/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "@automattic/calypso-build/tsconfig",
+	"compilerOptions": {
+		// Disallow features that require cross-file information for emit.
+		// Must be used with babel typescript
+		"isolatedModules": true,
+
+		"baseUrl": ".",
+		"paths": {
+			"*": [ "*", "../../*" ]
+		}
+	}
+}

client/landing/custom-editor/utils.ts

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import wpcomRequest from 'wpcom-proxy-request';
+
+/**
+ * A lot of the following is copied from D37093-code.
+ * Maybe we can move this code into Calypso `packages/`, parametrize it (e.g. apiFetch)
+ * and move into Calypso's `packages/wpcom-proxy-request`, or publish as a new npm for use on WP.com.
+ */
+
+// FIXME -- quick'n'dirty setting of a few params
+const _currentSiteId = 89417913; // @ockham's test site, replace with your own
+
+const wpApiSettings = {
+	root: 'https://public-api.wordpress.com/',
+};
+
+/**
+ * Normalizes the path for requests to the public API.
+ */
+function wpcomFetchNormalizePath( options ) {
+	if ( options.url && options.url.indexOf( wpApiSettings.root ) !== -1 ) {
+		options.path = options.url.replace( wpApiSettings.root, '' );
+		delete options.url;
+	}
+
+	if ( options.path ) {
+		// Ensures path starts with a slash.
+		if ( ! options.path.startsWith( '/' ) ) {
+			options.path = '/' + options.path;
+		}
+
+		// Removes namespace from path.
+		if ( options.apiNamespace ) {
+			options.path = options.path.replace( '/' + options.apiNamespace, '' );
+		}
+	}
+
+	return options;
+}
+
+/**
+ * Creates a fetch-like response.
+ */
+function wpcomFetchCreateFetchResponse( data, status, headers ) {
+	var fetchResponse;
+	var normalizedHeaders = {};
+	for ( var header in headers ) {
+		normalizedHeaders[ header.toLowerCase() ] = headers[ header ];
+	}
+	if ( Array.isArray( data ) ) {
+		fetchResponse = data.slice( 0 );
+	} else {
+		fetchResponse = Object.assign( {}, data );
+	}
+	fetchResponse.status = status;
+	fetchResponse.json = function() {
+		return Promise.resolve( data );
+	};
+	fetchResponse.headers = {
+		get: function( name ) {
+			return normalizedHeaders[ name && name.toLowerCase() ];
+		},
+	};
+	return fetchResponse;
+}
+
+/**
+ * Determines the namespace from the request path.
+ */
+function wpcomFetchSetNamespace( options, next ) {
+	if ( options.path && ! options.namespace ) {
+		var namespace = options.path.match( /^\/([a-z]+\/v?[0-9.]+)\// );
+		if ( namespace ) {
+			options.apiNamespace = namespace[ 1 ];
+			options.path = options.path.replace( '/' + options.apiNamespace, '' );
+		} else {
+			// Defaults all requests to the wp/v2 namespace.
+			options.apiNamespace = 'wp/v2';
+		}
+	}
+	console.log( 'post-norm options', options );
+	return next( options, next );
+}
+
+/**
+ * Prefixes any non-global request endpoint to the site specific endpoint.
+ */
+function wpcomFetchAddSitePrefix( options, next ) {
+	if ( options.path && ! options.global && options.path.indexOf( '/sites/' ) === -1 ) {
+		options.path = '/sites/' + _currentSiteId + options.path;
+	}
+	return next( options, next );
+}
+
+// Register middlewares (last-registered runs first).
+[
+	wpcomFetchAddSitePrefix,
+	wpcomFetchSetNamespace,
+	function( options, next ) {
+		// Path needs to be normalized first.
+		return next( wpcomFetchNormalizePath( options ), next );
+	},
+].forEach( function( middleware ) {
+	apiFetch.use( middleware );
+} );
+
+apiFetch.setFetchHandler( wpcomRequest );

client/package.json

@@ -58,6 +58,7 @@
 		"@wordpress/data-controls": "^1.16.3",
 		"@wordpress/dom": "^2.13.1",
 		"@wordpress/edit-post": "^3.21.6",
+		"@wordpress/edit-site": "^1.11.7",
 		"@wordpress/editor": "^9.20.6",
 		"@wordpress/element": "^2.16.0",
 		"@wordpress/format-library": "^1.22.6",

client/server/pages/index.js

@@ -44,6 +44,7 @@ import { logSectionResponse } from './analytics';
 import analytics from 'server/lib/analytics';
 import { getLanguage, filterLanguageRevisions } from 'lib/i18n-utils';
 import { isWooOAuth2Client } from 'lib/oauth2-clients';
+import { CUSTOM_EDITOR_SECTION_DEFINITION } from 'landing/custom-editor/section';
 import { GUTENBOARDING_SECTION_DEFINITION } from 'landing/gutenboarding/section';
 import wooDnaConfig from 'jetpack-connect/woo-dna-config';
 
@@ -721,6 +722,7 @@ export default function pages() {
 	handleSectionPath( LOGIN_SECTION_DEFINITION, '/log-in', 'entry-login' );
 	loginRouter( serverRouter( app, setUpRoute, null ) );
 
+	handleSectionPath( CUSTOM_EDITOR_SECTION_DEFINITION, '/custom-editor', 'entry-custom-editor' );
 	handleSectionPath( GUTENBOARDING_SECTION_DEFINITION, '/new', 'entry-gutenboarding' );
 
 	// This is used to log to tracks Content Security Policy violation reports sent by browsers

client/webpack.config.js

@@ -154,6 +154,7 @@ const webpackConfig = {
 		'entry-domains-landing': [ path.join( __dirname, 'landing', 'domains' ) ],
 		'entry-login': [ path.join( __dirname, 'landing', 'login' ) ],
 		'entry-gutenboarding': [ path.join( __dirname, 'landing', 'gutenboarding' ) ],
+		'entry-custom-editor': [ path.join( __dirname, 'landing', 'custom-editor' ) ],
 	} ),
 	mode: isDevelopment ? 'development' : 'production',
 	devtool: process.env.SOURCEMAP || ( isDevelopment ? '#eval' : false ),

config/development.json

@@ -39,6 +39,7 @@
 		"current-site/domain-warning": true,
 		"current-site/notice": true,
 		"current-site/stale-cart-notice": true,
+		"custom-editor": true,
 		"desktop-promo": true,
 		"devdocs": true,
 		"devdocs/redirect-loggedout-homepage": true,