feat(inertia): complete v3 template migration

Author: DominusKelvin

package-lock.json

@@ -0,0 +1,76 @@
+/**
+ * Utilities for describing how mergeable props should be merged by the client.
+ */
+
+function createDefaultMergeOperation() {
+  return {
+    direction: 'append',
+    path: null,
+    matchOn: null,
+    isDefault: true
+  }
+}
+
+function normalizeMergeOptions(options) {
+  return typeof options === 'string' ? { matchOn: options } : options || {}
+}
+
+function normalizeMergeTargets(paths, options = {}) {
+  const normalizedOptions = normalizeMergeOptions(options)
+
+  if (paths === null || paths === undefined) {
+    return [
+      {
+        path: null,
+        matchOn: normalizedOptions.matchOn || null
+      }
+    ]
+  }
+
+  if (Array.isArray(paths)) {
+    return paths.map((path) => ({
+      path: normalizePath(path),
+      matchOn: resolveTargetMatchOn(path, normalizedOptions)
+    }))
+  }
+
+  if (typeof paths === 'object') {
+    return Object.entries(paths).map(([path, matchOn]) => ({
+      path: normalizePath(path),
+      matchOn
+    }))
+  }
+
+  return [
+    {
+      path: normalizePath(paths),
+      matchOn: resolveTargetMatchOn(paths, normalizedOptions)
+    }
+  ]
+}
+
+function normalizePath(path) {
+  return path === '' ? null : path
+}
+
+function resolveTargetMatchOn(path, options) {
+  if (!options.matchOn) return null
+  if (typeof options.matchOn === 'object') return options.matchOn[path] || null
+  return options.matchOn
+}
+
+function resolvePropPath(key, path) {
+  return path ? `${key}.${path}` : key
+}
+
+function unique(values) {
+  return [...new Set(values)]
+}
+
+module.exports = {
+  createDefaultMergeOperation,
+  normalizeMergeOptions,
+  normalizeMergeTargets,
+  resolvePropPath,
+  unique
+}

packages/inertia-sails/lib/props/merge-targets.js

@@ -1,3 +1,9 @@
+const {
+  createDefaultMergeOperation,
+  normalizeMergeOptions,
+  normalizeMergeTargets
+} = require('./merge-targets')
+
 /**
  * MergeableProp - Base class for props that can be merged during partial reloads.
  *
@@ -27,12 +33,7 @@ module.exports = class MergeableProp {
     this.shouldMerge = true
     this.shouldDeepMerge = false
     if (this.mergeOperations.length === 0) {
-      this.mergeOperations.push({
-        direction: 'append',
-        path: null,
-        matchOn: null,
-        isDefault: true
-      })
+      this.mergeOperations.push(createDefaultMergeOperation())
     }
     return this
   }
@@ -83,14 +84,13 @@ module.exports = class MergeableProp {
   }
 
   _addMergeOperations(direction, paths, options) {
-    const normalizedOptions =
-      typeof options === 'string' ? { matchOn: options } : options || {}
+    const normalizedOptions = normalizeMergeOptions(options)
 
     this.shouldMerge = true
     this.shouldDeepMerge = false
     this._clearDefaultMergeOperation()
 
-    this._normalizeMergeTargets(paths, normalizedOptions).forEach((target) => {
+    normalizeMergeTargets(paths, normalizedOptions).forEach((target) => {
       this.mergeOperations.push({
         direction,
         path: target.path,
@@ -109,47 +109,4 @@ module.exports = class MergeableProp {
       this.mergeOperations = []
     }
   }
-
-  _normalizeMergeTargets(paths, options) {
-    if (paths === null || paths === undefined) {
-      return [
-        {
-          path: null,
-          matchOn: options.matchOn || null
-        }
-      ]
-    }
-
-    if (Array.isArray(paths)) {
-      return paths.map((path) => ({
-        path: this._normalizePath(path),
-        matchOn: this._resolveMatchOn(path, options)
-      }))
-    }
-
-    if (typeof paths === 'object') {
-      return Object.entries(paths).map(([path, matchOn]) => ({
-        path: this._normalizePath(path),
-        matchOn
-      }))
-    }
-
-    return [
-      {
-        path: this._normalizePath(paths),
-        matchOn: this._resolveMatchOn(paths, options)
-      }
-    ]
-  }
-
-  _normalizePath(path) {
-    return path === '' ? null : path
-  }
-
-  _resolveMatchOn(path, options) {
-    if (!options.matchOn) return null
-    if (typeof options.matchOn === 'object')
-      return options.matchOn[path] || null
-    return options.matchOn
-  }
 }

packages/inertia-sails/lib/props/mergeable-prop.js

@@ -3,6 +3,7 @@ const {
   RESET
 } = require('../helpers/inertia-headers')
 const MergeableProp = require('./mergeable-prop')
+const { resolvePropPath, unique } = require('./merge-targets')
 const ScrollProp = require('./scroll-prop')
 
 /**
@@ -79,11 +80,3 @@ module.exports = function resolveMergeProps(req, pageProps) {
 
   return result
 }
-
-function resolvePropPath(key, path) {
-  return path ? `${key}.${path}` : key
-}
-
-function unique(values) {
-  return [...new Set(values)]
-}

packages/inertia-sails/lib/props/resolve-merge-props.js

@@ -1,6 +1,6 @@
 {
   "name": "inertia-sails",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "The Sails adapter for Inertia.",
   "main": "index.js",
   "sails": {

packages/inertia-sails/package.json

@@ -0,0 +1,74 @@
+const { describe, it } = require('node:test')
+const assert = require('node:assert/strict')
+const {
+  createDefaultMergeOperation,
+  normalizeMergeOptions,
+  normalizeMergeTargets,
+  resolvePropPath,
+  unique
+} = require('../../lib/props/merge-targets')
+
+describe('merge-targets', function () {
+  it('creates the default root append operation', function () {
+    assert.deepEqual(createDefaultMergeOperation(), {
+      direction: 'append',
+      path: null,
+      matchOn: null,
+      isDefault: true
+    })
+  })
+
+  it('normalizes string options as match-on metadata', function () {
+    assert.deepEqual(normalizeMergeOptions('id'), { matchOn: 'id' })
+  })
+
+  it('normalizes root targets', function () {
+    assert.deepEqual(normalizeMergeTargets(null, { matchOn: 'id' }), [
+      {
+        path: null,
+        matchOn: 'id'
+      }
+    ])
+  })
+
+  it('normalizes array targets with shared match-on metadata', function () {
+    assert.deepEqual(normalizeMergeTargets(['users', 'messages'], 'id'), [
+      {
+        path: 'users',
+        matchOn: 'id'
+      },
+      {
+        path: 'messages',
+        matchOn: 'id'
+      }
+    ])
+  })
+
+  it('normalizes object targets as path-to-match maps', function () {
+    assert.deepEqual(
+      normalizeMergeTargets({
+        'users.data': 'id',
+        messages: 'uuid'
+      }),
+      [
+        {
+          path: 'users.data',
+          matchOn: 'id'
+        },
+        {
+          path: 'messages',
+          matchOn: 'uuid'
+        }
+      ]
+    )
+  })
+
+  it('resolves prop paths and unique values', function () {
+    assert.equal(resolvePropPath('users', 'data'), 'users.data')
+    assert.equal(resolvePropPath('users', null), 'users')
+    assert.deepEqual(unique(['users', 'users', 'messages']), [
+      'users',
+      'messages'
+    ])
+  })
+})

packages/inertia-sails/tests/props/merge-targets.test.js

@@ -2,7 +2,7 @@ import { Head, Link } from '@inertiajs/react'
 import AppLayout from '@/layouts/AppLayout.jsx'
 import { useState } from 'react'
 
-Pricing.layout = (page) => <AppLayout children={page} />
+Pricing.layout = AppLayout
 export default function Pricing({ plans }) {
   const [billingCycle, setBillingCycle] = useState('monthly')
 

templates/ascent-react/assets/js/pages/billing/pricing.jsx

@@ -1,7 +1,7 @@
 import { Head, Link } from '@inertiajs/react'
 import AppLayout from '@/layouts/AppLayout.jsx'
 
-Blog.layout = (page) => <AppLayout children={page} />
+Blog.layout = AppLayout
 
 export default function Blog({ appName, blogPosts }) {
   return (

templates/ascent-react/assets/js/pages/blog.jsx

@@ -1,11 +1,7 @@
 import { Link, Head, usePage } from '@inertiajs/react'
 import DashboardLayout from '@/layouts/DashboardLayout.jsx'
 
-Dashboard.layout = (page) => (
-  <DashboardLayout title="Dashboard" maxWidth="wide">
-    {page}
-  </DashboardLayout>
-)
+Dashboard.layout = [DashboardLayout, { title: 'Dashboard', maxWidth: 'wide' }]
 export default function Dashboard() {
   const page = usePage()
   const loggedInUser = page.props.loggedInUser

templates/ascent-react/assets/js/pages/dashboard/index.jsx

@@ -1,7 +1,7 @@
 import { Head, Link } from '@inertiajs/react'
 import AppLayout from '@/layouts/AppLayout.jsx'
 
-Features.layout = (page) => <AppLayout children={page} />
+Features.layout = AppLayout
 export default function Features() {
   return (
     <>