@cedarjs/cli 7.0.1-next.467 → 7.1.0-rc.34

package/dist/commands/generate/scaffold/scaffoldHandler.js

@@ -5,15 +5,14 @@ import { paramCase } from "change-case";
 import humanize from "humanize-string";
 import { Listr } from "listr2";
 import pascalcase from "pascalcase";
-import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import {
   addWorkspacePackages,
   removeWorkspacePackages
 } from "@cedarjs/cli-helpers/packageManager/packages";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { generate as generateTypes } from "@cedarjs/internal/dist/generate/generate";
-import { getConfig, getParsedScalars } from "@cedarjs/project-config";
+import { getConfig } from "@cedarjs/project-config";
 import { pluralize, singularize } from "@cedarjs/utils/cedarPluralize";
 import {
   generateTemplate,
@@ -86,18 +85,6 @@ const getImportComponentNames = (name, scaffoldPath, nestScaffoldByModel = true)
     importLayoutNames: `src/layouts/ScaffoldLayout`
   };
 };
-const getScaffoldLayoutNames = (name, scaffoldPath = "") => {
-  const pluralPascalName = pascalcase(pluralize(name));
-  const directoryName = `${pluralPascalName}ScaffoldLayout`;
-  const pathParts = scaffoldPath === "" ? [] : scaffoldPath.split("/").map(pascalcase);
-  return {
-    directoryName,
-    pathParts,
-    // The name to import the layout as in Routes.{jsx,tsx}
-    importName: pascalcase(scaffoldPath) + directoryName,
-    importPath: ["src/layouts", ...pathParts, directoryName].join("/")
-  };
-};
 const getTemplateStrings = (name, scaffoldPath, nestScaffoldByModel = true) => {
   const nameVars = nameVariants(name);
   const camelScaffoldPath = camelcase(pascalcase(scaffoldPath));
@@ -109,21 +96,11 @@ const getTemplateStrings = (name, scaffoldPath, nestScaffoldByModel = true) => {
     ...getImportComponentNames(name, scaffoldPath, nestScaffoldByModel)
   };
 };
-const webDependsOnTailwindCSS = () => {
-  const webPackageJsonPath = path.join(getPaths().web.base, "package.json");
-  if (!fs.existsSync(webPackageJsonPath)) {
-    return false;
-  }
-  const { dependencies, devDependencies } = JSON.parse(
-    fs.readFileSync(webPackageJsonPath, "utf-8")
-  );
-  return Boolean(
-    dependencies?.["tailwindcss"] || devDependencies?.["tailwindcss"]
-  );
-};
 const shouldUseTailwindCSS = (flag) => {
   if (flag === void 0) {
-    return webDependsOnTailwindCSS();
+    return fs.existsSync(
+      path.join(getPaths().web.config, "tailwind.config.cjs")
+    );
   } else {
     return flag;
   }
@@ -172,13 +149,7 @@ const files = async ({
     }),
     ...await assetFiles(name, tailwind),
     ...await formatters(name, typescript),
-    ...await layoutFiles(
-      name,
-      scaffoldPath,
-      force,
-      typescript,
-      templateStrings
-    ),
+    ...await layoutFiles(name, force, typescript, templateStrings),
     ...await pageFiles(
       name,
       pascalScaffoldPath,
@@ -218,7 +189,6 @@ const assetFiles = async (name, tailwind) => {
   }
   return fileList;
 };
-const isDateTimeParsed = () => getParsedScalars().DateTime === "Date";
 const formatters = async (name, isTypescript) => {
   const outputPath = path.join(
     getPaths().web.src,
@@ -240,8 +210,7 @@ const formatters = async (name, isTypescript) => {
       templatePath: path.join("lib", "formatters.tsx.template")
     }),
     {
-      name,
-      parsedDateTime: isDateTimeParsed()
+      name
     }
   );
   const templateTest = await generateTemplate(
@@ -251,8 +220,7 @@ const formatters = async (name, isTypescript) => {
       templatePath: path.join("lib", "formatters.test.tsx.template")
     }),
     {
-      name,
-      parsedDateTime: isDateTimeParsed()
+      name
     }
   );
   return {
@@ -372,61 +340,44 @@ const modelRelatedVariables = (model) => {
     fieldsToImport,
     editableColumns,
     listFormattersImports,
-    formattersImports,
-    parsedDateTime: isDateTimeParsed()
+    formattersImports
   };
 };
-const layoutFiles = async (name, scaffoldPath, force, generateTypescript, templateStrings) => {
+const layoutFiles = async (name, force, generateTypescript, templateStrings) => {
   const fileList = {};
-  const extension = generateTypescript ? ".tsx" : ".jsx";
-  const renderLayout = async (templateName, outputPath) => {
-    const template = await generateTemplate(
-      customOrDefaultTemplatePath({
-        side: "web",
-        generator: "scaffold",
-        templatePath: path.join("layouts", templateName)
-      }),
-      {
-        name,
-        pascalScaffoldPath: "",
-        ...templateStrings
-      }
-    );
-    fileList[outputPath] = generateTypescript || !outputPath.endsWith(".jsx") ? template : await transformTSToJS(outputPath, template);
-  };
-  const sharedLayoutDir = path.join(getPaths().web.layouts, "ScaffoldLayout");
-  const sharedLayoutTemplates = fs.readdirSync(
+  const layouts = fs.readdirSync(
     customOrDefaultTemplatePath({
       side: "web",
       generator: "scaffold",
       templatePath: "layouts"
     })
-  ).filter((template) => template !== "NamesScaffoldLayout.tsx.template");
-  for (const template of sharedLayoutTemplates) {
-    const isComponent = template.endsWith(".tsx.template");
-    const outputName = isComponent ? template.replace(/\.tsx\.template$/, extension) : template.replace(/\.template$/, "");
-    const exists = isComponent ? [".tsx", ".jsx", ".ts", ".js"].some(
-      (ext) => fs.existsSync(
-        path.join(sharedLayoutDir, outputName.replace(extension, ext))
-      )
-    ) : fs.existsSync(path.join(sharedLayoutDir, outputName));
-    if (!exists || force) {
-      await renderLayout(template, path.join(sharedLayoutDir, outputName));
-    }
-  }
-  const { directoryName, pathParts } = getScaffoldLayoutNames(
-    name,
-    scaffoldPath
   );
-  await renderLayout(
-    "NamesScaffoldLayout.tsx.template",
-    path.join(
+  for (const layout of layouts) {
+    const outputLayoutName = layout.replace(
+      /\.tsx\.template/,
+      generateTypescript ? ".tsx" : ".jsx"
+    );
+    const outputPath = path.join(
       getPaths().web.layouts,
-      ...pathParts,
-      directoryName,
-      directoryName + extension
-    )
-  );
+      "ScaffoldLayout",
+      outputLayoutName
+    );
+    if (!fs.existsSync(outputPath) || force) {
+      const template = await generateTemplate(
+        customOrDefaultTemplatePath({
+          side: "web",
+          generator: "scaffold",
+          templatePath: path.join("layouts", layout)
+        }),
+        {
+          name,
+          pascalScaffoldPath: "",
+          ...templateStrings
+        }
+      );
+      fileList[outputPath] = generateTypescript ? template : await transformTSToJS(outputPath, template);
+    }
+  }
   return fileList;
 };
 const pageFiles = async (name, pascalScaffoldPath = "", generateTypescript, nestScaffoldByModel = true, templateStrings) => {
@@ -468,7 +419,7 @@ const pageFiles = async (name, pascalScaffoldPath = "", generateTypescript, nest
         ...modelRelatedVariables(model)
       }
     );
-    fileList[outputPath] = generateTypescript || !outputPath.endsWith(".jsx") ? template : await transformTSToJS(outputPath, template);
+    fileList[outputPath] = generateTypescript ? template : await transformTSToJS(outputPath, template);
   }
   return fileList;
 };
@@ -516,7 +467,7 @@ const componentFiles = async (name, pascalScaffoldPath = "", generateTypescript,
         ...modelRelatedVariables(model)
       }
     );
-    fileList[outputPath] = generateTypescript || !outputPath.endsWith(".jsx") ? template : await transformTSToJS(outputPath, template);
+    fileList[outputPath] = generateTypescript ? template : await transformTSToJS(outputPath, template);
   }
   return fileList;
 };
@@ -547,9 +498,8 @@ const routes = async ({
     `<Route path="/${paramScaffoldPath}${nameVars.pluralParamName}" page={${pageRoot}${nameVars.pluralPascalName}Page} name="${templateNames.pluralRouteName}" />`
   ];
 };
-const addLayoutImport = (model, scaffoldPath) => {
-  const { importName, importPath } = getScaffoldLayoutNames(model, scaffoldPath);
-  const importLayout = `import ${importName} from '${importPath}'`;
+const addLayoutImport = () => {
+  const importLayout = `import ScaffoldLayout from 'src/layouts/ScaffoldLayout'`;
   const routesPath = getPaths().web.routes;
   const routesContent = readFile(routesPath).toString();
   if (!routesContent.match(importLayout)) {
@@ -663,10 +613,17 @@ const addSetImport = (task) => {
   return `Added ${namesToImport.join(", ")} import to Routes.{jsx,tsx}`;
 };
 const addScaffoldSetToRouter = async (model, scaffoldPath) => {
+  const templateNames = getTemplateStrings(model, scaffoldPath);
+  const nameVars = nameVariants(model);
+  const title = nameVars.pluralPascalName;
+  const titleTo = templateNames.pluralRouteName;
+  const buttonLabel = `New ${nameVars.singularPascalName}`;
+  const buttonTo = templateNames.newRouteName;
   const unauthenticatedRoute = getUnauthenticatedRedirectRoute();
   return addRoutesToRouterTask(
     await routes({ model, path: scaffoldPath }),
-    getScaffoldLayoutNames(model, scaffoldPath).importName,
+    "ScaffoldLayout",
+    { title, titleTo, buttonLabel, buttonTo },
     unauthenticatedRoute ? { unauthenticated: unauthenticatedRoute } : void 0
   );
 };
@@ -707,7 +664,7 @@ const tasks = ({
       },
       {
         title: "Adding layout import...",
-        task: async () => addLayoutImport(model, path2)
+        task: async () => addLayoutImport()
       },
       {
         title: "Adding set import...",
@@ -823,7 +780,6 @@ const splitPathAndModel = (pathSlashModel) => {
 };
 export {
   files,
-  getScaffoldLayoutNames,
   getUnauthenticatedRedirectRoute,
   handler,
   hasLoginRoute,

package/dist/commands/generate/scaffold/templates/assets/scaffold.tailwind.css.template

@@ -1,9 +1,3 @@
-/**
- * Makes your app's Tailwind theme and utilities available to `@apply`
- * without emitting any of the styles in index.css a second time
- */
-@reference './index.css';
-
 .rw-scaffold {
   @apply bg-white text-gray-600;
 }
@@ -33,7 +27,8 @@
   @apply mx-4 pb-4;
 }
 .rw-segment {
-  @apply rounded-lg overflow-hidden w-full border border-gray-200 scrollbar-thumb-zinc-400 scrollbar-track-transparent;
+  @apply rounded-lg overflow-hidden w-full border border-gray-200;
+  scrollbar-color: theme('colors.zinc.400') transparent;
 }
 .rw-segment::-webkit-scrollbar {
   height: initial;
@@ -85,7 +80,7 @@
 }
 .rw-cell-error,
 .rw-form-error-wrapper {
-  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded-sm my-4;
+  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded my-4;
 }
 .rw-form-error-title {
   @apply m-0 font-semibold;
@@ -94,13 +89,13 @@
   @apply mt-2 list-disc list-inside;
 }
 .rw-button {
-  @apply flex justify-center py-1 px-4 border-0 rounded-sm bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
+  @apply flex justify-center py-1 px-4 border-0 rounded bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
 }
 .rw-button:hover {
   @apply bg-gray-500 text-white;
 }
 .rw-button.rw-button-small {
-  @apply text-xs rounded-xs py-1 px-2;
+  @apply text-xs rounded-sm py-1 px-2;
 }
 .rw-button.rw-button-green {
   @apply bg-green-500 text-white;
@@ -139,7 +134,7 @@
   @apply text-red-600;
 }
 .rw-input {
-  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded-sm outline-hidden;
+  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded outline-none;
 }
 .rw-check-radio-items {
   @apply flex justify-items-center;
@@ -158,7 +153,7 @@
   @apply border-red-600 text-red-600;
 }
 .rw-input-error:focus {
-  @apply border-red-600 outline-hidden;
+  @apply border-red-600 outline-none;
   box-shadow: 0 0 5px #c53030;
 }
 .rw-field-error {

package/dist/commands/generate/scaffold/templates/components/EditNameCell.tsx.template

@@ -1,7 +1,6 @@
 ${useClientDirective}import type {
   Edit${singularPascalName}By${pascalIdName},
   Update${singularPascalName}Input,
-  Update${singularPascalName}Mutation,
   Update${singularPascalName}MutationVariables
 } from 'types/graphql'
 
@@ -25,7 +24,7 @@ export const QUERY: TypedDocumentNode<Edit${singularPascalName}By${pascalIdName}
 `
 
 const UPDATE_${singularConstantName}_MUTATION: TypedDocumentNode<
-  Update${singularPascalName}Mutation,
+  Edit${singularPascalName}ById,
   Update${singularPascalName}MutationVariables
 > = gql`
   mutation Update${singularPascalName}Mutation($${idName}: ${idType}!, $input: Update${singularPascalName}Input!) {
@@ -57,14 +56,17 @@ export const Success = ({ ${singularCamelName} }: CellSuccessProps<Edit${singula
     }
   )
 
-  const onSave = (input: Update${singularPascalName}Input) => {
-    update${singularPascalName}({ variables: { ${idName}: ${singularCamelName}.${idName}, input } })
+  const onSave = (
+    input: Update${singularPascalName}Input,
+    id: Edit${singularPascalName}By${pascalIdName}['${singularCamelName}']['id']
+  ) => {
+    update${singularPascalName}({ variables: { id, input } })
   }
 
   return (
     <div className="rw-segment">
       <header className="rw-segment-header">
-        <h2 className="rw-heading rw-heading-secondary">Edit ${singularPascalName} {${singularCamelName}.${idName}}</h2>
+        <h2 className="rw-heading rw-heading-secondary">Edit ${singularPascalName} {${singularCamelName}?.id}</h2>
       </header>
       <div className="rw-segment-main">
         <${singularPascalName}Form ${singularCamelName}={${singularCamelName}} onSave={onSave} error={error} loading={loading} />

package/dist/commands/generate/scaffold/templates/components/NameForm.tsx.template

@@ -1,4 +1,4 @@
-import type { Edit${singularPascalName}By${pascalIdName}, Create${singularPascalName}Input } from 'types/graphql'
+import type { Edit${singularPascalName}By${pascalIdName}, Update${singularPascalName}Input } from 'types/graphql'
 
 import type { RWGqlError } from '@cedarjs/forms'
 import {
@@ -12,17 +12,17 @@ import {
 
 <% if (fieldsToImport.includes('DatetimeLocalField')) { %>
 /**
- * Formats a DateTime <%= parsedDateTime ? 'Date object' : 'string' %> from the API, which is a UTC timestamp, for use as
+ * Formats a DateTime string from the API, which is a UTC timestamp, for use as
  * the value of a `datetime-local` input. The input takes `YYYY-MM-DDTHH:mm` in
  * the user's local time, with no seconds, milliseconds or timezone, and the
  * form reads its value back as local time when it is submitted.
  */
-function formatDatetime(value: <%= parsedDateTime ? 'Date' : 'string' %> | undefined | null) {
+function formatDatetime(value: string | undefined | null) {
   if (!value) {
     return undefined
   }
 
-  const date = <%= parsedDateTime ? 'value' : 'new Date(value)' %>
+  const date = new Date(value)
 
   if (Number.isNaN(date.getTime())) {
     return undefined
@@ -48,8 +48,8 @@ type Form${singularPascalName} = NonNullable<Edit${singularPascalName}By${pascal
 
 interface ${singularPascalName}FormProps {
   ${singularCamelName}?: Edit${singularPascalName}By${pascalIdName}['${singularCamelName}']
-  onSave: (data: Create${singularPascalName}Input) => void
-  error?: RWGqlError
+  onSave: (data: Update${singularPascalName}Input, ${idName}?: Form${singularPascalName}['${idName}']) => void
+  error: RWGqlError
   loading: boolean
 }
 
@@ -70,8 +70,7 @@ const ${singularPascalName}Form = (props: ${singularPascalName}FormProps) => {
       }
     <% } %>
     <% if (column.isEnum && !column.isList && !column.isRequired) { %>
-      // The "None" option has an empty value
-      if (!data.${column.name}) {
+      if (data.${column.name} === '') {
         data.${column.name} = null
       }
     <% } %>
@@ -81,7 +80,7 @@ const ${singularPascalName}Form = (props: ${singularPascalName}FormProps) => {
       }
     <% } %>
   <% }) %>
-    props.onSave(data)
+    props.onSave(data, props?.${singularCamelName}?.${idName})
   }
 
   return (
@@ -137,7 +136,7 @@ const ${singularPascalName}Form = (props: ${singularPascalName}FormProps) => {
         <% } else { %>
           <${column.component}
             name="${column.name}"
-            ${column.defaultProp}={${column.deserializeFunction && column.deserializeFunction + '('}props.${singularCamelName}?.<%= column.name %>${column.deserializeFunction && ')'}<%= !column.deserializeFunction && !column.isRequired ? ' ?? undefined' : '' %>}
+            ${column.defaultProp}={${column.deserializeFunction && column.deserializeFunction + '('}props.${singularCamelName}?.<%= column.name %>${column.deserializeFunction && ')'}}
             className="rw-input"
             errorClassName="rw-input rw-input-error"
             <%= !column.validation ? '' : `validation=${column.validation}` %>

package/dist/commands/generate/scaffold/templates/lib/formatters.test.tsx.template

@@ -83,25 +83,14 @@ describe('jsonTruncate', () => {
 
 describe('timeTag', () => {
   it('renders a date', async () => {
-<% if (parsedDateTime) { %>
-    render(<div>{timeTag(new Date('1970-08-20'))}</div>)
-<% } else { %>
     render(<div>{timeTag(new Date('1970-08-20').toUTCString())}</div>)
-<% } %>
 
     await waitFor(() => screen.getByText(/1970.*00:00:00/))
   })
 
-<% if (parsedDateTime) { %>
-  it('can take an empty input', async () => {
-    expect(timeTag(null)).toEqual('')
-    expect(timeTag(undefined)).toEqual('')
-  })
-<% } else { %>
   it('can take an empty input string', async () => {
     expect(timeTag('')).toEqual('')
   })
-<% } %>
 })
 
 describe('jsonDisplay', () => {

package/dist/commands/generate/scaffold/templates/lib/formatters.tsx.template

@@ -25,7 +25,7 @@ export const jsonDisplay = (obj: unknown) => {
   )
 }
 
-export const truncate = (value: string | number | null | undefined) => {
+export const truncate = (value: string | number) => {
   let output = value?.toString() ?? ''
 
   if (output.length > MAX_STRING_LENGTH) {
@@ -39,32 +39,20 @@ export const jsonTruncate = (obj: unknown) => {
   return truncate(JSON.stringify(obj, null, 2))
 }
 
-export function timeTag(dateTime: <%= parsedDateTime ? 'Date' : 'string' %> | undefined | null) {
+export function timeTag(dateTime: string | undefined | null) {
   let output: string | React.JSX.Element = ''
 
   if (dateTime) {
-<% if (parsedDateTime) { %>
-    if (!Number.isNaN(dateTime.getTime())) {
-      const isoString = dateTime.toISOString()
-
-      output = (
-        <time dateTime={isoString} title={isoString}>
-          {dateTime.toUTCString()}
-        </time>
-      )
-    }
-<% } else { %>
     output = (
       <time dateTime={dateTime} title={dateTime}>
         {new Date(dateTime).toUTCString()}
       </time>
     )
-<% } %>
   }
 
   return output
 }
 
-export const checkboxInputTag = (checked: boolean | null | undefined) => {
-  return <input type="checkbox" checked={!!checked} disabled />
+export const checkboxInputTag = (checked: boolean) => {
+  return <input type="checkbox" checked={checked} disabled />
 }

package/dist/commands/generate/script/scriptHandler.js

@@ -1,8 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { Listr } from "listr2";
-import { colors as c } from "@cedarjs/cli-helpers/colors";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
+import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
 import { errorTelemetry } from "@cedarjs/telemetry";
 import {
   getPaths,

package/dist/commands/generate/script/templates/tsconfig.json.template

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "noEmit": true,
     "allowJs": true,
-    "strict": true,
     "esModuleInterop": true,
     "baseUrl": "./",
     "rootDirs": [

package/dist/commands/generate/sdl/sdlHandler.js

@@ -2,9 +2,8 @@ import ansis from "ansis";
 import boxen from "boxen";
 import camelcase from "camelcase";
 import { Listr } from "listr2";
-import { colors as c } from "@cedarjs/cli-helpers/colors";
+import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { generate as generateTypes } from "@cedarjs/internal/dist/generate/generate";
 import { getConfig } from "@cedarjs/project-config";
 import { errorTelemetry } from "@cedarjs/telemetry";
@@ -19,11 +18,7 @@ import {
   getEnum,
   verifyModelName
 } from "../../../lib/schemaHelpers.js";
-import {
-  DEFAULT_IGNORE_FIELDS_FOR_INPUT,
-  redactedModelFields,
-  relationsForModel
-} from "../helpers.js";
+import { redactedModelFields, relationsForModel } from "../helpers.js";
 import { files as serviceFiles } from "../service/serviceHandler.js";
 import { templateForFile } from "../yargsHandlerHelpers.js";
 import {
@@ -31,6 +26,7 @@ import {
   missingRelatedModels,
   writeFilesWithStubsTask
 } from "./stubFiles.js";
+const DEFAULT_IGNORE_FIELDS_FOR_INPUT = ["createdAt", "updatedAt"];
 const missingIdConsoleMessage = () => {
   const line1 = ansis.bold.yellow("WARNING") + ": Cannot generate CRUD SDL without an `@id` database column.";
   const line2 = "If you are trying to generate for a many-to-many join table ";
@@ -64,8 +60,7 @@ const modelFieldToSDL = ({
     Bytes: "Byte"
   };
   const gqlType = prismaTypeToGraphqlType[field.type] || field.type;
-  const listItemType = field.kind === "object" ? gqlType : `${gqlType}!`;
-  const type = field.isList ? `[${listItemType}]` : gqlType;
+  const type = field.isList ? `[${gqlType}]` : gqlType;
   const isRequired = field.isRequired && required || field.isList || field.isId;
   const fieldContent = `${field.name}: ${type}${isRequired ? "!" : ""}`;
   if (docs) {
@@ -336,7 +331,6 @@ const handler = async ({
 export {
   files,
   handler,
-  modelFieldToSDL,
   printRedactedFieldsNote,
   redactedSensitiveFields,
   stubFiles

package/dist/commands/generate/secret/secret.js

@@ -1,6 +1,6 @@
 import crypto from "node:crypto";
 import { terminalLink } from "termi-link";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
 const DEFAULT_LENGTH = 32;
 const generateSecret = (length = DEFAULT_LENGTH) => {
   return crypto.randomBytes(Math.trunc(length)).toString("base64");