feat: makeNameByUrl

d2/components/d2/admin/layout/header-aside/index.vue

@@ -33,10 +33,10 @@
 </template>
 
 <script>
-import { makeName } from 'd2/utils/component.js'
+import { makeNameByUrl } from 'd2/utils/component.js'
 
 export default {
-  name: makeName('admin/layout/header-aside')
+  name: makeNameByUrl(import.meta.url)
 }
 </script>
 

d2/components/demo/break-points-display-item.vue

@@ -17,7 +17,10 @@
 </template>
 
 <script>
+import { makeNameByUrl } from 'd2/utils/component.js'
+
 export default {
+  name: makeNameByUrl(import.meta.url),
   props: {
     value: { type: Boolean },
     name: { type: String }

d2/components/demo/break-points-display.vue

@@ -16,9 +16,11 @@
 </template>
 
 <script>
+import { makeNameByUrl } from 'd2/utils/component.js'
 import { breakPointsName } from 'd2/utils/const.js'
 
 export default {
+  name: makeNameByUrl(import.meta.url),
   props: {
     status: { type: Object }
   },

d2/components/demo/playground-controller.vue

@@ -20,7 +20,10 @@
 </template>
 
 <script>
+import { makeNameByUrl } from 'd2/utils/component.js'
+
 export default {
+  name: makeNameByUrl(import.meta.url),
   props: {
     label: { type: String, default: '' },
     options: { type: Array, default: () => [] },

d2/components/demo/section.vue

@@ -8,7 +8,10 @@
 </template>
 
 <script>
+import { makeNameByUrl } from 'd2/utils/component.js'
+
 export default {
+  name: makeNameByUrl(import.meta.url),
   props: {
     title: {
       type: String,

d2/utils/component.js

@@ -1,22 +1,55 @@
+import { customAlphabet } from 'nanoid'
 import { kebabCase } from 'lodash-es'
 import { pascalCase } from 'd2/utils/string.js'
 import { namespace } from './const.js'
 
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 10)
+
 /**
  * Format component name
  * @param {string} name simple component name has no prefix
  *                      eg: 'Foo Bar' '--foo-bar--' '__FOO_BAR__' 'foo/bar'
- * @returns {string} eg: 'NamespaceFooBar'
+ * @returns {string} component name. eg: 'NamespaceFooBar'
  */
 export function makeName (name) {
   return pascalCase(`${namespace}-${name}`)
 }
 
+/**
+ * Randomly generate a component name
+ * @returns {string} component name. eg: 'NamespaceAisjkxuednj'
+ */
+export function makeRandomName () {
+  return makeName(nanoid())
+}
+
+/**
+ * Format component name by component file url
+ * @param {string} url component file url
+ * @returns {string} component name. eg: 'NamespaceFooBar'
+ */
+export function makeNameByUrl (url) {
+  const base = 'd2/components/'
+  if (import.meta.env.DEV) {
+    url = url
+      .replace(RegExp(`^${window.location.origin}/${base}(d2/)?`), '')
+      .replace(/\?t=\d+$/, '')
+      .replace(/(\/index)?\.(vue|js|jsx)$/, '')
+  } else {
+    url = url
+      .replace(RegExp(base), '')
+      .replace(/(\/index)?\.(vue|js|jsx)$/, '')
+  }
+  console.log('makeNameByUrl [url]', url)
+  console.log('makeNameByUrl [name]', makeName(url))
+  return makeName(url)
+}
+
 /**
  * Format component main class name
  * @param {string} name simple component name has no prefix
  *                      eg 'Foo Bar' 'fooBar' '__FOO_BAR__' 'foo/bar'
- * @returns {string} eg: 'namespace-foo-bar'
+ * @returns {string} component name. eg: 'namespace-foo-bar'
  */
 export function makeClassName (name) {
   return `${namespace}-${kebabCase(name)}`