fix: use IIFE (#26)

.eslintrc

@@ -6,7 +6,7 @@
   },
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx"],
+      "files": ["*.ts"],
       "extends": [
         "standard-with-typescript",
         "plugin:import/recommended",

README.md

@@ -1,6 +1,6 @@
 # Gatsby Plugin Fix FOUC
 
-[![Build](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/ci.yml/badge.svg)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/ci.yml)
+[![Test](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/test.yml/badge.svg)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/test.yml)
 [![Linter](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/linter.yml/badge.svg)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/linter.yml)
 [![Publish (latest)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/publish-latest.yml/badge.svg)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/publish-latest.yml)
 [![Publish (next)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/publish-next.yml/badge.svg)](https://github.com/bicstone/gatsby-plugin-fix-fouc/actions/workflows/publish-next.yml)

jest.config.ts

@@ -21,7 +21,7 @@ const config: InitialOptionsTsJest = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["./src/**/*.{ts,tsx}"],
+  collectCoverageFrom: ["./src/**/*.ts"],
 
   // The directory where Jest should output its coverage files
   // coverageDirectory: "coverage",
@@ -175,7 +175,7 @@ const config: InitialOptionsTsJest = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    "^.+\\.tsx?$": "ts-jest",
+    "^.+\\.ts$": "ts-jest",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-fix-fouc",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Gatsby Plugin Fix FOUC is a plugin that solves flicker of unstyled content",
   "main": "index.js",
   "types": "index.d.ts",
@@ -15,8 +15,8 @@
     "e2e": "yarn build:e2e && cd e2e && yarn e2e:run",
     "e2e:open": "yarn build:e2e && cd e2e && yarn e2e:open",
     "build": "yarn build:plugin && yarn build:emit",
-    "build:e2e": "babel src/gatsby-ssr.tsx src/index.ts --out-dir e2e/plugins/gatsby-plugin-fix-fouc --extensions .ts,.tsx",
-    "build:plugin": "babel src --out-dir . --extensions .ts,.tsx",
+    "build:e2e": "babel src/gatsby-ssr.ts src/index.ts --out-dir e2e/plugins/gatsby-plugin-fix-fouc --extensions .ts",
+    "build:plugin": "babel src --out-dir . --extensions .ts",
     "build:emit": "tsc -p tsconfig.emitDeclarations.json",
     "lint": "eslint --cache --ignore-path .eslintignore --max-warnings=0 .",
     "lint:fix": "yarn lint --fix",
@@ -50,7 +50,7 @@
     "gatsby": "^3 || ^4"
   },
   "dependencies": {
-    "camel-case": "4.1.2"
+    "camel-case": "^4"
   },
   "devDependencies": {
     "@babel/cli": "7.19.3",

src/gatsby-browser.ts

@@ -10,5 +10,7 @@ export const onInitialClientRender = (
   const attributeName =
     pluginOptions.attributeName ?? defaultOptions.attributeName;
 
-  delete window.document.body.dataset?.[camelCase(attributeName)];
+  try {
+    delete window.document.body.dataset?.[camelCase(attributeName)];
+  } catch (e) {}
 };

src/gatsby-ssr.tsx → src/gatsby-ssr.ts

@@ -1,7 +1,7 @@
-import React from "react";
+import * as React from "react";
 
 import { camelCase } from "camel-case";
-import { defaultOptions, GatsbyPluginFixFoucOptions } from "./";
+import { defaultOptions, GatsbyPluginFixFoucOptions } from ".";
 
 import type { RenderBodyArgs } from "gatsby";
 
@@ -15,34 +15,42 @@ export const onRenderBody = (
   const timeout = pluginOptions.timeout ?? defaultOptions.timeout;
 
   setHeadComponents([
-    <style
-      key="loading-screen-style"
-      dangerouslySetInnerHTML={{
+    React.createElement("style", {
+      key: "loading-screen-style",
+      dangerouslySetInnerHTML: {
         __html:
           `body[data-${attributeName}]{opacity:1}` +
           `@media(min-width:${minWidth}px){body[data-${attributeName}]{opacity:0}}`,
-      }}
-    />,
+      },
+    }),
 
-    <noscript
-      key="loading-screen-noscript-style"
-      dangerouslySetInnerHTML={{
+    React.createElement("noscript", {
+      key: "loading-screen-noscript-style",
+      dangerouslySetInnerHTML: {
         __html:
           `<style>` +
           `body[data-${attributeName}]{opacity:1!important}` +
           `</style>`,
-      }}
-    />,
+      },
+    }),
 
-    <script
-      key="loading-screen-fail-safe"
-      dangerouslySetInnerHTML={{
+    React.createElement("script", {
+      key: "loading-screen-fail-safe",
+      dangerouslySetInnerHTML: {
         __html:
+          `(function(){` +
           `setTimeout(function(){` +
-          `delete document.body.dataset?.["${camelCase(attributeName)}"]` +
-          `},${timeout})`,
-      }}
-    />,
+          `try{` +
+          `if(` +
+          `document.body.dataset["${camelCase(attributeName)}"]!==undefined` +
+          `){` +
+          `delete document.body.dataset["${camelCase(attributeName)}"]` +
+          `}` +
+          `}catch(e){}` +
+          `},${timeout})` +
+          `})();`,
+      },
+    }),
   ]);
 
   setBodyAttributes({

tsconfig.json

@@ -105,6 +105,6 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["*.ts", "*.tsx", "src"],
+  "include": ["*.ts", "src"],
   "exclude": ["node_modules"]
 }

yarn.lock

@@ -5279,7 +5279,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:4.1.2, camel-case@npm:^4.1.2":
+"camel-case@npm:^4, camel-case@npm:^4.1.2":
   version: 4.1.2
   resolution: "camel-case@npm:4.1.2"
   dependencies:
@@ -8558,7 +8558,7 @@ __metadata:
     "@typescript-eslint/parser": 5.41.0
     all-contributors-cli: 6.24.0
     babel-preset-gatsby-package: 2.24.0
-    camel-case: 4.1.2
+    camel-case: ^4
     eslint: 8.26.0
     eslint-config-prettier: 8.5.0
     eslint-config-standard: 17.0.0