enable schema.yaml to be loaded directly by default

Author: ddooley

lib/Toolbar.js

@@ -215,10 +215,17 @@ class Toolbar {
             );
           }
 
-          // reload the context with the new locale
+          // reload the context with the new locale.
+          // For file-uploaded schemas the template_path is 'local/<ClassName>'
+          // and there is no server path to fetch from. Pass the cached default
+          // schema so buildTemplateFromUploadedSchema() is used (which now
+          // extracts extensions.locales) rather than a failing server fetch.
           // console.log('reload 1: translationSelect change');
+          const forced_schema_for_locale = current_template.startsWith('local/')
+            ? this.context.template.default.schema
+            : null;
           await this.context
-            .reload(current_template, language_update)
+            .reload(current_template, language_update, forced_schema_for_locale)
             .then((context) => {
               for (const dh in context.dhs) {
                 if (typeof _dh_data_cache[dh] !== 'undefined') {
@@ -1342,9 +1349,14 @@ export function titleOverText(enm) {
     }
 
     // RELOAD THE INTERFACE BY INTERACTING WITH THE CONTEXT
+    // For menu loads (file === null), don't pass forced_schema: Template.create
+    // will fetch the schema fresh from the server, preserving all locale data
+    // embedded in schema.extensions.locales. Passing forced_schema for menu
+    // loads caused buildTemplateFromUploadedSchema() to strip locales, making
+    // the first language switch silently fail (supportsLocale = false).
     console.log('reload 3: loadSelectedTemplate');
     this.context
-      .reload(template_path, null, schema)
+      .reload(template_path, null, file ? schema : null)
       .then(this.restartInterface.bind(this));
 
     // SETUP MODAL EVENTS

lib/utils/templates.js

@@ -9,7 +9,8 @@
 
 import { deepMerge } from './objects';
 import { fetchFileAsync } from './files';
-import { menu, getSchema } from 'schemas'; // located in /web/schemas.js
+import { menu, getSchema, getSchemaYaml } from 'schemas'; // located in /web/schemas.js
+import { fetchAndProcessYaml, processYamlSchema } from './schema_induction';
 
 // Retrieves template given in browser URL by template= , OR returns first menu item Object.keys(menu)[0]
 export function getTemplatePathInScope() {
@@ -31,42 +32,57 @@ export function getTemplatePathInScope() {
   return templatePath;
 }
 
-// Running locally on user's computer so get schema from schemas.json
-//E.g. window.location === http://localhost:8000
-// However this may have to be reengineered when we do local running of app
-// but with URL access to web for schema(s).
+// Fetches schema, preferring schema.yaml at runtime (avoids build step) and
+// falling back to pre-built schema.json when YAML is unavailable.
 async function fetchSchema(path) {
 
-  if (window.location.href.startsWith('http://localhost:') || window.location.protocol.startsWith('file')) {
-    const schema_path = path.replace(/\/templates\/(.+)\/schema.json/, '$1');
-    return await getSchema(schema_path);
-  } 
-  else if (window.location.protocol.startsWith('http')) {
-
-    // PROBLEM: local HTTPS server in /dist folder doesn't work
-    // path e.g. /templates/canada_covid19/schema.json
-    return await fetchFileAsync(path);
+  // For any HTTP protocol (localhost or production), schema.yaml and schema.json
+  // are both served as static files from web/dist/templates/ via CopyPlugin.
+  // Fetch YAML first; if that fails, fetch JSON directly — no webpack bundle needed.
+  if (window.location.protocol.startsWith('http')) {
+    const yamlPath = path.replace(/schema\.json$/, 'schema.yaml');
+    const yamlUrl = new URL(yamlPath, window.location.href).href;
+    try {
+      return await fetchAndProcessYaml(yamlUrl);
+    } catch (e) {
+      console.warn('schema_induction: YAML load failed, falling back to schema.json:', e.message);
+    }
+    // JSON static-file fallback
+    try {
+      const response = await fetch(path);
+      if (response.ok) return await response.json();
+    } catch (e) {
+      console.warn('fetchSchema: schema.json fetch also failed:', e.message);
+    }
+    return null;
   }
 
+  // file:// protocol: browsers block fetch() for file:// origins.
+  // Try webpack-bundled schema.json first; if absent, try webpack-bundled
+  // schema.yaml (raw text, bundled as asset/source) processed synchronously.
+  const schema_path = path.replace(/\/templates\/(.+)\/schema.json/, '$1');
+  const jsonSchema = await getSchema(schema_path);
+  if (jsonSchema) return jsonSchema;
+
+  const yamlText = await getSchemaYaml(schema_path);
+  if (yamlText) return processYamlSchema(yamlText);
+
   return null;
 }
 
 //Used only in this script in create()
 function buildTemplateFromUploadedSchema(schema) {
-  const name = schema.name || ''; // Brand new schema
+  const name = schema.name || '';
   const locales = {};
 
-  if (schema.in_language) {
-    const languages = Array.isArray(schema.in_language)
-      ? schema.in_language
-      : [schema.in_language];
-
-    // PROBABLY IGNORE THESE SINCE UPLOADED SCHEMA DOESN'T COME WITH locales
-    languages.forEach((locale) => {
-      locales[locale] = { schema };
-      locales;
+  // Extract any locales embedded in the schema via extensions.locales.value,
+  // using the same deep-merge logic as the server-fetch path in create().
+  // This applies to both uploaded .yaml files and to schemas passed by
+  // loadSelectedTemplate when the file was loaded from disk.
+  Object.entries(schema.extensions?.locales?.value || {})
+    .forEach(([locale, locale_schema]) => {
+      locales[locale] = { schema: deepMerge(schema, locale_schema) };
     });
-  }
 
   return {
     name,

web/schemas.js

@@ -1,10 +1,28 @@
 import menu_ from './templates/menu.json';
 
 export const menu = menu_;
-// The build process encodes all templates/ schema.son into one file.
+
+// Webpack bundles all templates/*/schema.json files as lazy chunks.
+// Returns null gracefully when a template has no schema.json (file:// fallback).
 export const getSchema = async (schema_folder) => {
-  return (await import(`./templates/${schema_folder}/schema.json`)).default;
+  try {
+    return (await import(`./templates/${schema_folder}/schema.json`)).default;
+  } catch (e) {
+    return null;
+  }
+};
+
+// Webpack bundles all templates/*/schema.yaml files as raw-text lazy chunks
+// (asset/source rule in webpack.schemas.js / webpack.config.js).
+// Used as a file:// fallback when schema.json is not in the bundle.
+export const getSchemaYaml = async (schema_folder) => {
+  try {
+    return (await import(`./templates/${schema_folder}/schema.yaml`)).default;
+  } catch (e) {
+    return null;
+  }
 };
+
 export const getExportFormats = async (schema_folder) => {
   return (await import(`./templates/${schema_folder}/export.js`)).default;
 };

web/webpack.config.js

@@ -31,13 +31,18 @@ module.exports = (env, argv) => {
         template: './index.html',
       }),
       new CopyPlugin({
-        // Covers all schema.json including locales
+        // Covers all schema.json and schema.yaml including locales
         patterns: [
           {
             context: 'templates',
             from: '**/schema.json',
             to: 'templates/[path][name][ext]',
-          },   
+          },
+          {
+            context: 'templates',
+            from: '**/schema.yaml',
+            to: 'templates/[path][name][ext]',
+          },
           {
             context: 'images',
             from: '**/*.gif',
@@ -51,6 +56,12 @@ module.exports = (env, argv) => {
     ],
     module: {
       rules: [
+        {
+          // Bundle schema.yaml as raw text for the file:// fallback (getSchemaYaml).
+          // Only active in dev mode where schemas.js is bundled directly.
+          test: /schema\.yaml$/,
+          type: 'asset/source',
+        },
         { test: /\.xlsx$/, loader: 'webpack-xlsx-loader' },
         {
           test: /\.(c|d|t)sv$/, // load all .csv, .dsv, .tsv files with dsv-loader

web/webpack.schemas.js

@@ -6,6 +6,16 @@ module.exports = {
   entry: {
     schemas: './schemas.js',
   },
+  module: {
+    rules: [
+      {
+        // Bundle schema.yaml files as raw text strings (asset/source) so that
+        // getSchemaYaml() can return them without fetch() in file:// contexts.
+        test: /schema\.yaml$/,
+        type: 'asset/source',
+      },
+    ],
+  },
   output: {
     path: path.resolve(__dirname, 'dist', 'dist-schemas'),
     filename: '[name].js',
@@ -28,6 +38,14 @@ module.exports = {
           from: '**/schema.yaml',
           to: '../templates/[path][name][ext]',
         },
+        {
+          // schema.json as a static file so the HTTP JSON fallback in
+          // fetchSchema() can fetch it directly without the webpack bundle.
+          context: 'templates',
+          from: '**/schema.json',
+          to: '../templates/[path][name][ext]',
+          noErrorOnMissing: true,
+        },
         {
           context: 'templates',
           from: '**/exampleInput/*.*',