fix #1961: add {{date:format}} to script template

src/_locales/en/messages.yml

@@ -140,6 +140,11 @@ descEditorOptions:
     them may not work in Violentmonkey. See <a
     href="https://codemirror.net/doc/manual.html#config" target="_blank"
     rel="noopener noreferrer">full list</a>.
+descScriptTemplate:
+  description: Description of script template section.
+  message: >-
+    Supported variables: <{{name}}>, <{{url}}>, <{{date}}>, <{{date:format}}>
+    with MomentJS-compatible format, for example <{{date:YYYY-MM-DD}}>.
 editHelpDocumention:
   description: Label in the editor help tab for the documentation link.
   message: 'Documentation on userscript metadata block and <code>GM</code> API:'

src/background/utils/script.js

@@ -5,6 +5,7 @@ import {
   __CODE,
   HOMEPAGE_URL, INFERRED, METABLOCK_RE, SUPPORT_URL, USERSCRIPT_META_INTRO,
 } from '@/common/consts';
+import { formatDate } from '@/common/date';
 import { mapEntry } from '@/common/object';
 import { addOwnCommands, commands } from './init';
 import { getOption } from './options';
@@ -101,14 +102,14 @@ export function newScript(data) {
   const state = {
     url: '*://*/*',
     name: '',
-    date: new Date().toLocaleString(),
     ...data,
   };
   const code = getOption('scriptTemplate')
-  .replace(/{{(\w+)}}/g, (str, name) => {
-    const value = state[name];
-    return value == null ? str : value;
-  });
+  .replace(/{{(\w+)(?::(.+?))?}}/g, (str, name, format) => state[name] ?? (
+    name !== 'date' ? str
+      : format ? formatDate(format)
+        : new Date().toLocaleString()
+  ));
   const script = {
     custom: getDefaultCustom(),
     config: {

src/options/views/tab-settings/index.vue

@@ -137,6 +137,12 @@
 
       <section>
         <h3 v-text="i18n('labelScriptTemplate')"/>
+        <p>
+          <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+          <component v-for="(str, i) in i18n('descScriptTemplate').split(/<(\S+?)>/)" v-text="str"
+                     :key="i" :is="i % 2 ? 'code' : 'span'"
+          /> <vm-date-info/><!--DANGER! Using the same line to preserve the space-->
+        </p>
         <setting-text name="scriptTemplate" has-reset/>
       </section>
 
@@ -170,6 +176,7 @@ import VmExport from './vm-export';
 import VmSync from './vm-sync';
 import VmEditor from './vm-editor';
 import VmBlacklist from './vm-blacklist';
+import VmDateInfo from './vm-date-info';
 
 const badgeColorEnum = {
   badgeColor: i18n('titleBadgeColor'),
@@ -245,6 +252,7 @@ export default {
     VmSync,
     VmEditor,
     VmBlacklist,
+    VmDateInfo,
     SettingCheck,
     SettingText,
     LocaleGroup,
@@ -326,5 +334,10 @@ export default {
   ruby {
     color: var(--fill-8);
   }
+  .icon {
+    width: 16px;
+    height: 16px;
+    fill: var(--fg);
+  }
 }
 </style>

src/options/views/tab-settings/vm-date-info.vue

@@ -0,0 +1,19 @@
+<template>
+  <tooltip :content="DATE_HELP" placement="left" style="vertical-align: middle">
+    <a :href="DATE_HELP_URL" target="_blank">
+      <icon name="info"/>
+    </a>
+  </tooltip>
+</template>
+
+<script>
+import { i18n } from '@/common';
+import { DATE_FMT } from '@/common/date';
+const DATE_HELP = i18n('msgDateFormatInfo', Object.keys(DATE_FMT).join(', '));
+const DATE_HELP_URL = 'https://momentjs.com/docs/#/displaying/format/';
+</script>
+
+<script setup>
+import Tooltip from 'vueleton/lib/tooltip';
+import Icon from '@/common/ui/icon';
+</script>

src/options/views/tab-settings/vm-export.vue

@@ -4,11 +4,7 @@
       <button v-text="i18n('buttonExportData')" @click="handleExport" :disabled="exporting"/>
       <setting-text name="exportNameTemplate" ref="tpl" has-reset :has-save="false" :rows="1"
                     class="tpl flex flex-1 center-items ml-1c"/>
-      <tooltip :content="i18n('msgDateFormatInfo', dateTokens)" placement="left">
-        <a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">
-          <icon name="info"/>
-        </a>
-      </tooltip>
+      <vm-date-info/>
       <span hidden v-text="fileName"/>
     </div>
     <div class="mt-1">
@@ -32,21 +28,19 @@
 <script setup>
 import { computed, ref } from 'vue';
 import Modal from 'vueleton/lib/modal';
-import Tooltip from 'vueleton/lib/tooltip';
-import Icon from '@/common/ui/icon';
 import { getScriptName, sendCmdDirectly } from '@/common';
-import { formatDate, DATE_FMT } from '@/common/date';
+import { formatDate } from '@/common/date';
 import { objectGet } from '@/common/object';
 import options from '@/common/options';
 import SettingCheck from '@/common/ui/setting-check';
 import SettingText from '@/common/ui/setting-text';
 import { downloadBlob } from '@/common/download';
 import loadZip from '@/common/zip';
+import VmDateInfo from './vm-date-info';
 
 let ua;
 
 const tpl = ref();
-const dateTokens = Object.keys(DATE_FMT).join(', ');
 const exporting = ref(false);
 const ffDownload = ref(IS_FIREFOX && {});
 const fileName = computed(() => {
@@ -149,11 +143,6 @@ async function exportData() {
   .modal-content {
     width: 13rem;
   }
-  .icon {
-    width: 16px;
-    height: 16px;
-    fill: var(--fg);
-  }
   .tpl {
     max-width: 30em;
     &:focus-within ~ [hidden] {