Where do I find a proper doc on preact ejs variables?

Question

I decided to move my react hobby project from react to preact and struggling with the documentation. Most of the information I got was either from the existing examples or issue discussions on the github.

But what still didn't find is the info on ejs variables used in the template html file.

Is there a good explanation what variables there are by default and how to manage them?

Sorry, we're definitely a bit light on docs there. I'll try to write up a wiki tonight. May I ask what information you're looking for in particular? There's nothing really that you can "manage" in terms of values that are included by default. You can inject additional values though using your `prerender-urls.{js,json}` however. — rschristian, Jan 09 '22 at 05:57

score 1 · Accepted Answer · answered Jan 09 '22 at 06:31

There's not much of use that's there by default, as this is instead a method of allowing you to inject your own values. If you want to see what's there by default, you can add the following to your template.html:

<body>
    <% preact.bodyEnd %>
    <%= JSON.stringify(htmlWebpackPlugin.options) %>
</body>

This is what would get spit out:

{
   "template":"!!/home/ryun/Projects/foobar/node_modules/ejs-loader/index.js?esModule=false!/tmp/preact-cli/template.tmp.ejs",
   "filename":"index.html",
   "hash":false,
   "inject":true,
   "compile":true,
   "favicon":"assets/favicon.ico",
   "minify":{
      "collapseWhitespace":true,
      "removeScriptTypeAttributes":true,
      "removeRedundantAttributes":true,
      "removeStyleLinkTypeAttributes":true,
      "removeComments":true
   },
   "cache":true,
   "showErrors":true,
   "chunks":"all",
   "excludeChunks":[
      
   ],
   "chunksSortMode":"auto",
   "meta":{
      
   },
   "title":"Home Page",
   "xhtml":false,
   "url":"/",
   "inlineCss":true,
   "preload":false,
   "manifest":{
      "name":"foobar",
      "short_name":"foobar",
      "start_url":"/",
      "display":"standalone",
      "orientation":"portrait",
      "background_color":"#fff",
      "theme_color":"#673ab8",
      "icons":[
         {
            "src":"/assets/icons/android-chrome-192x192.png",
            "type":"image/png",
            "sizes":"192x192"
         },
         {
            "src":"/assets/icons/android-chrome-512x512.png",
            "type":"image/png",
            "sizes":"512x512"
         }
      ]
   },
   "excludeAssets":[
      {
         
      }
   ],
   "config":{
      "_":[
         
      ],
      "src":"/home/ryun/Projects/foobar/src",
      "dest":"/home/ryun/Projects/foobar/build",
      "cwd":"/home/ryun/Projects/foobar",
      "esm":true,
      "sw":true,
      "babelConfig":".babelrc",
      "preload":false,
      "prerender":true,
      "prerenderUrls":"prerender-urls.json",
      "brotli":false,
      "inline-css":true,
      "config":"preact.config.js",
      "c":"preact.config.js",
      "production":true,
      "isProd":true,
      "isWatch":false,
      "manifest":{
         "name":"foobar",
         "short_name":"foobar",
         "start_url":"/",
         "display":"standalone",
         "orientation":"portrait",
         "background_color":"#fff",
         "theme_color":"#673ab8",
         "icons":[
            {
               "src":"/assets/icons/android-chrome-192x192.png",
               "type":"image/png",
               "sizes":"192x192"
            },
            {
               "src":"/assets/icons/android-chrome-512x512.png",
               "type":"image/png",
               "sizes":"512x512"
            }
         ]
      },
      "pkg":{
         "private":true,
         "name":"foobar",
         "version":"0.0.0",
         "license":"MIT",
         "scripts":{
            "build":"preact build",
            "serve":"sirv build --port 3001 --cors --single",
            "dev":"preact watch -p 3001",
            "lint":"eslint src",
            "test":"jest"
         },
         "eslintConfig":{
            "extends":"preact",
            "ignorePatterns":[
               "build/"
            ]
         },
         "devDependencies":{
            "enzyme":"^3.10.0",
            "enzyme-adapter-preact-pure":"^2.0.0",
            "eslint":"^6.0.1",
            "eslint-config-preact":"^1.1.0",
            "jest":"^24.9.0",
            "jest-preset-preact":"^1.0.0",
            "preact-cli":"^3.0.0",
            "sirv-cli":"1.0.3"
         },
         "dependencies":{
            "preact":"^10.3.2",
            "preact-render-to-string":"^5.1.4",
            "preact-router":"^3.2.1"
         },
         "jest":{
            "preset":"jest-preset-preact",
            "setupFiles":[
               "<rootdir>/tests/__mocks__/browserMocks.js",
               "<rootdir>/tests/__mocks__/setupTests.js"
            ]
         }
      }
   },
   "scriptLoading":"defer",
   "CLI_DATA":{
      "preRenderData":{
         "url":"/"
      }
   }
}

Not really useful, but it's not meant to be. These are just the options used to configure html-webpack-plugin.

However, if using a prerender-urls.{json,js} then this becomes really useful.

prerender-urls.json

[
  {
    "url": "/",
    "title": "Home Page",
    "myVal": "foo"
  },
  {
    "url": "/profile",
    "title": "Profile Page",
    "myVal": "bar"
  }
]

Now in our template we can do the following:

<meta name="some-meta-tag" content="<%= htmlWebpackPlugin.options.myVal %>">

That value would get swapped out for what you've specified in your prerender-urls.json file, for each route that gets prerendered.

Certainly let me know if you have any other questions. I will add a wiki going over some common things as I do think our information is a tad lacking, so if there's anything you'd like to see I can add it there. — rschristian, Jan 10 '22 at 09:08

Where do I find a proper doc on preact ejs variables?

1 Answers1