feat: 🎸 Allow for full customization of the head

Initially Elder.js shipped with <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> hard coded into the template. This moves those to a hook so that it can be disabled.
Elderjs · Sep 9, 2020 · 0fe54d4 · 0fe54d4
1 parent b60c999
commit 0fe54d4
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 28 deletions.
diff --git a/src/__tests__/__snapshots__/Elder.spec.ts.snap b/src/__tests__/__snapshots__/Elder.spec.ts.snap
@@ -400,6 +400,17 @@ Elder {
       "priority": 100,
       "run": [Function],
     },
+    Object {
+      "$$meta": Object {
+        "addedBy": "elder.js",
+        "type": "internal",
+      },
+      "description": "Adds <meta charset=\\"UTF-8\\" /><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" /> to the head.",
+      "hook": "stacks",
+      "name": "elderAddDefaultHeadTags",
+      "priority": 10,
+      "run": [Function],
+    },
     Object {
       "$$meta": Object {
         "addedBy": "elder.js",
@@ -982,6 +993,17 @@ Elder {
       "priority": 100,
       "run": [Function],
     },
+    Object {
+      "$$meta": Object {
+        "addedBy": "elder.js",
+        "type": "internal",
+      },
+      "description": "Adds <meta charset=\\"UTF-8\\" /><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" /> to the head.",
+      "hook": "stacks",
+      "name": "elderAddDefaultHeadTags",
+      "priority": 10,
+      "run": [Function],
+    },
     Object {
       "$$meta": Object {
         "addedBy": "elder.js",

diff --git a/src/__tests__/__snapshots__/hooks.spec.ts.snap b/src/__tests__/__snapshots__/hooks.spec.ts.snap
@@ -1,5 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`#hooks elderAddDefaultHeadTags 1`] = `
+Object {
+  "headStack": Array [
+    Object {
+      "priority": 10,
+      "source": "elderAddDefaultHeadTags",
+      "string": "<meta charset=\\"UTF-8\\" /><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />",
+    },
+  ],
+}
+`;
+
 exports[`#hooks elderAddDefaultIntersectionObserver 1`] = `
 Object {
   "beforeHydrateStack": Array [
@@ -55,6 +67,13 @@ Array [
     "priority": 100,
     "run": [Function],
   },
+  Object {
+    "description": "Adds <meta charset=\\"UTF-8\\" /><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" /> to the head.",
+    "hook": "stacks",
+    "name": "elderAddDefaultHeadTags",
+    "priority": 10,
+    "run": [Function],
+  },
   Object {
     "description": "Sets up the default polyfill for the intersection observer",
     "hook": "stacks",

diff --git a/src/__tests__/hooks.spec.ts b/src/__tests__/hooks.spec.ts
@@ -28,40 +28,43 @@ describe('#hooks', () => {
   it('elderAddExternalHelpers', async () => {
     expect(await hooks[0].run({ helpers: { old: jest.fn() }, query: {}, settings: {} })).toMatchSnapshot();
   });
+  it('elderAddDefaultHeadTags', async () => {
+    expect(await hooks[1].run({ headStack: [] })).toMatchSnapshot();
+  });
   it('elderAddDefaultIntersectionObserver', async () => {
     expect(
-      await hooks[1].run({ beforeHydrateStack: [], settings: { locations: { intersectionObserverPoly: 'foo' } } }),
+      await hooks[2].run({ beforeHydrateStack: [], settings: { locations: { intersectionObserverPoly: 'foo' } } }),
     ).toMatchSnapshot();
-    expect(await hooks[1].run({ beforeHydrateStack: [], settings: {} })).toBe(null);
+    expect(await hooks[2].run({ beforeHydrateStack: [], settings: {} })).toBe(null);
   });
   it('elderAddSystemJs', async () => {
     expect(
-      await hooks[2].run({ beforeHydrateStack: [], headStack: [], settings: { locations: { systemJs: 'foo' } } }),
+      await hooks[3].run({ beforeHydrateStack: [], headStack: [], settings: { locations: { systemJs: 'foo' } } }),
     ).toMatchSnapshot();
-    expect(await hooks[2].run({ beforeHydrateStack: [], settings: {} })).toBe(null);
+    expect(await hooks[3].run({ beforeHydrateStack: [], settings: {} })).toBe(null);
   });
   it('elderConsoleLogErrors', async () => {
-    expect(await hooks[3].run({ errors: ['foo', 'bar'] })).toBe(undefined);
+    expect(await hooks[4].run({ errors: ['foo', 'bar'] })).toBe(undefined);
   });
   it('elderWriteHtmlFileToPublic', async () => {
     expect(
-      await hooks[4].run({
+      await hooks[5].run({
         request: { permalink: '/foo' },
         htmlString: '<html>string</html>',
         errors: [],
         settings: {},
       }),
     ).toBe(null);
     expect(
-      await hooks[4].run({
+      await hooks[5].run({
         request: { permalink: '/foo' },
         htmlString: '<html>string</html>',
         errors: [],
         settings: { build: './build', locations: { public: './public' } },
       }),
     ).toBe(null);
     expect(
-      await hooks[4].run({
+      await hooks[5].run({
         request: { permalink: '/foo' },
         htmlString: '<html>string</html>',
         errors: [],
@@ -71,7 +74,7 @@ describe('#hooks', () => {
   });
   it('elderDisplayRequestTime', async () => {
     expect(
-      await hooks[5].run({
+      await hooks[6].run({
         request: { permalink: '/foo' },
         timings: [
           { name: 'foo', duration: 500 },
@@ -83,7 +86,7 @@ describe('#hooks', () => {
   });
   it('elderShowParsedBuildTimes', async () => {
     expect(
-      await hooks[6].run({
+      await hooks[7].run({
         timings: [
           [
             { name: 'foo', duration: 500 },
@@ -100,7 +103,7 @@ describe('#hooks', () => {
   });
   it('elderWriteBuildErrors', async () => {
     expect(
-      await hooks[7].run({
+      await hooks[8].run({
         errors: ['error1', 'error2'],
         settings: { debug: { performance: true } },
       }),

diff --git a/src/hooks.ts b/src/hooks.ts
@@ -28,17 +28,24 @@ const hooks: Array<HookOptions> = [
       return null;
     },
   },
-  // {
-  //   hook: 'initStacks',
-  //   name: 'Something malicious',
-  //   description: `Try and set a property on the data object where you shouldn't be able to.`,
-  //   priority: 1,
-  //   run: async ({ beforeHydrateStack, settings, data }) => {
-  //     data.test = true;
-  //     return {};
-  //   },
-  // },
-
+  {
+    hook: 'stacks',
+    name: 'elderAddDefaultHeadTags',
+    description: `Adds <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> to the head.`,
+    priority: 10,
+    run: async ({ headStack }) => {
+      return {
+        headStack: [
+          ...headStack,
+          {
+            source: 'elderAddDefaultHeadTags',
+            string: `<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />`,
+            priority: 10,
+          },
+        ],
+      };
+    },
+  },
   {
     hook: 'stacks',
     name: 'elderAddDefaultIntersectionObserver',

diff --git a/src/utils/Page.ts b/src/utils/Page.ts
@@ -81,8 +81,6 @@ const buildPage = async (page) => {
     page.htmlString = `<!DOCTYPE html>
       <html lang="en">
         <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
           ${page.headString}
         </head>
         <body class="${page.request.route}">

diff --git a/src/utils/__tests__/Page.spec.ts b/src/utils/__tests__/Page.spec.ts
@@ -207,8 +207,6 @@ describe('#Page', () => {
   const expectedOutput = `<!DOCTYPE html>
       <html lang="en">
         <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
           headStack<style data-name="cssStack">cssStack</style>
         </head>
         <body class="cityNursingHomes">

diff --git a/src/utils/__tests__/__snapshots__/Page.spec.ts.snap b/src/utils/__tests__/__snapshots__/Page.spec.ts.snap
@@ -263,8 +263,6 @@ Page {
   "htmlString": "<!DOCTYPE html>
       <html lang=\\"en\\">
         <head>
-          <meta charset=\\"UTF-8\\" />
-          <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
           headStack<style data-name=\\"cssStack\\">cssStack</style>
         </head>
         <body class=\\"cityNursingHomes\\">