vben
6 years ago
25 changed files with 372 additions and 135 deletions
@ -1,96 +0,0 @@ |
|||
// Modified from
|
|||
// https://github.com/luxueyan/vite-transform-globby-import/blob/master/src/index.ts
|
|||
|
|||
// TODO Currently, it is not possible to monitor file addition and deletion. The content has been changed, the cache problem?
|
|||
import { join } from 'path'; |
|||
import { lstatSync } from 'fs'; |
|||
import glob from 'glob'; |
|||
import { createResolver, Resolver } from 'vite/dist/node/resolver.js'; |
|||
import { Transform } from 'vite/dist/node/transform.js'; |
|||
|
|||
const modulesDir: string = join(process.cwd(), '/node_modules/'); |
|||
|
|||
interface SharedConfig { |
|||
root?: string; |
|||
alias?: Record<string, string>; |
|||
resolvers?: Resolver[]; |
|||
} |
|||
|
|||
function template(template: string) { |
|||
return (data: { [x: string]: any }) => { |
|||
return template.replace(/#([^#]+)#/g, (_, g1) => data[g1] || g1); |
|||
}; |
|||
} |
|||
|
|||
const globbyTransform = function (config: SharedConfig): Transform { |
|||
const resolver = createResolver( |
|||
config.root || process.cwd(), |
|||
config.resolvers || [], |
|||
config.alias || {} |
|||
); |
|||
const cache = new Map(); |
|||
|
|||
const urlMap = new Map(); |
|||
return { |
|||
test({ path }) { |
|||
const filePath = path.replace('\u0000', ''); // why some path startsWith '\u0000'?
|
|||
try { |
|||
return ( |
|||
!filePath.startsWith(modulesDir) && |
|||
/\.(vue|js|jsx|ts|tsx)$/.test(filePath) && |
|||
lstatSync(filePath).isFile() |
|||
); |
|||
} catch { |
|||
return false; |
|||
} |
|||
}, |
|||
transform({ code, path, isBuild }) { |
|||
let result = cache.get(path); |
|||
if (!result) { |
|||
const reg = /import\s+([\w\s{}*]+)\s+from\s+(['"])globby(\?path)?!([^'"]+)\2/g; |
|||
const match = code.match(reg); |
|||
if (!match) return code; |
|||
const lastImport = urlMap.get(path); |
|||
if (lastImport && match) { |
|||
code = code.replace(lastImport, match[0]); |
|||
} |
|||
result = code.replace(reg, (_, g1, g2, g3, g4) => { |
|||
const filePath = path.replace('\u0000', ''); // why some path startsWith '\u0000'?
|
|||
// resolve path
|
|||
const resolvedFilePath = g4.startsWith('.') |
|||
? resolver.resolveRelativeRequest(filePath, g4) |
|||
: { pathname: resolver.requestToFile(g4) }; |
|||
const files = glob.sync(resolvedFilePath.pathname, { dot: true }); |
|||
let templateStr = 'import #name# from #file#'; // import default
|
|||
let name = g1; |
|||
const m = g1.match(/\{\s*(\w+)(\s+as\s+(\w+))?\s*\}/); // import module
|
|||
const m2 = g1.match(/\*\s+as\s+(\w+)/); // import * as all module
|
|||
if (m) { |
|||
templateStr = `import { ${m[1]} as #name# } from #file#`; |
|||
name = m[3] || m[1]; |
|||
} else if (m2) { |
|||
templateStr = 'import * as #name# from #file#'; |
|||
name = m2[1]; |
|||
} |
|||
const temRender = template(templateStr); |
|||
|
|||
const groups: Array<string>[] = []; |
|||
const replaceFiles = files.map((f, i) => { |
|||
const file = g2 + resolver.fileToRequest(f) + g2; |
|||
groups.push([name + i, file]); |
|||
return temRender({ name: name + i, file }); |
|||
}); |
|||
urlMap.set(path, replaceFiles.join('\n')); |
|||
return ( |
|||
replaceFiles.join('\n') + |
|||
(g3 ? '\n' + groups.map((v) => `${v[0]}._path = ${v[1]}`).join('\n') : '') + |
|||
`\nconst ${name} = { ${groups.map((v) => v[0]).join(',')} }\n` |
|||
); |
|||
}); |
|||
if (isBuild) cache.set(path, result); |
|||
} |
|||
return result; |
|||
}, |
|||
}; |
|||
}; |
|||
export default globbyTransform; |
|||
@ -0,0 +1,201 @@ |
|||
// Modified from
|
|||
// https://github.com/luxueyan/vite-transform-globby-import/blob/master/src/index.ts
|
|||
|
|||
// TODO Deleting files requires re-running the project
|
|||
import { join } from 'path'; |
|||
import { lstatSync } from 'fs'; |
|||
import glob from 'glob'; |
|||
import globrex from 'globrex'; |
|||
import dotProp from 'dot-prop'; |
|||
import { createResolver, Resolver } from 'vite/dist/node/resolver.js'; |
|||
import { Transform } from 'vite/dist/node/transform.js'; |
|||
|
|||
const modulesDir: string = join(process.cwd(), '/node_modules/'); |
|||
|
|||
interface SharedConfig { |
|||
root?: string; |
|||
alias?: Record<string, string>; |
|||
resolvers?: Resolver[]; |
|||
|
|||
includes?: string[]; |
|||
} |
|||
|
|||
function template(template: string) { |
|||
return (data: { [x: string]: any }) => { |
|||
return template.replace(/#([^#]+)#/g, (_, g1) => data[g1] || g1); |
|||
}; |
|||
} |
|||
|
|||
// TODO support hmr
|
|||
function hmr(isBuild = false) { |
|||
if (isBuild) return ''; |
|||
return ` |
|||
if (import.meta.hot) { |
|||
import.meta.hot.accept(); |
|||
}`;
|
|||
} |
|||
|
|||
// handle includes
|
|||
function fileInclude(includes: string | string[] | undefined, filePath: string) { |
|||
return !includes || !Array.isArray(includes) |
|||
? true |
|||
: includes.some((item) => filePath.startsWith(item)); |
|||
} |
|||
|
|||
// Bare exporter
|
|||
function compareString(modify: any, data: string[][]) { |
|||
return modify ? '\n' + data.map((v) => `${v[0]}._path = ${v[1]}`).join('\n') : ''; |
|||
} |
|||
|
|||
function varTemplate(data: string[][], name: string) { |
|||
//prepare deep data (for locales)
|
|||
let deepData: Record<string, object | string> = {}; |
|||
let hasDeepData = false; |
|||
|
|||
//data modify
|
|||
data.map((v) => { |
|||
//check for has deep data
|
|||
if (v[0].includes('/')) { |
|||
hasDeepData = true; |
|||
} |
|||
|
|||
// lastKey is a data
|
|||
let pathValue = v[0].replace(/\//g, '.').split('.'); |
|||
let lastKey: string | undefined = pathValue.pop(); |
|||
|
|||
let deepValue: Record<any, any> = {}; |
|||
if (lastKey) { |
|||
deepValue[lastKey.replace('_' + pathValue[0], '')] = lastKey; |
|||
} |
|||
|
|||
// Set Deep Value
|
|||
deepValue = Object.assign(deepValue, dotProp.get(deepData, pathValue.join('.'))); |
|||
dotProp.set(deepData, pathValue.join('.'), deepValue); |
|||
}); |
|||
|
|||
if (hasDeepData) { |
|||
return `const ${name} = ` + JSON.stringify(deepData).replace(/\"|\'/g, ''); |
|||
} |
|||
|
|||
return `const ${name} = { ${data.map((v) => v[0]).join(',')} }`; |
|||
} |
|||
|
|||
const globTransform = function (config: SharedConfig): Transform { |
|||
const resolver = createResolver( |
|||
config.root || process.cwd(), |
|||
config.resolvers || [], |
|||
config.alias || {} |
|||
); |
|||
const { includes } = config; |
|||
const cache = new Map(); |
|||
const urlMap = new Map(); |
|||
return { |
|||
test({ path }) { |
|||
const filePath = path.replace('\u0000', ''); // why some path startsWith '\u0000'?
|
|||
|
|||
try { |
|||
return ( |
|||
!filePath.startsWith(modulesDir) && |
|||
/\.(vue|js|jsx|ts|tsx)$/.test(filePath) && |
|||
fileInclude(includes, filePath) && |
|||
lstatSync(filePath).isFile() |
|||
); |
|||
} catch { |
|||
return false; |
|||
} |
|||
}, |
|||
transform({ code, path, isBuild }) { |
|||
let result = cache.get(path); |
|||
if (!result) { |
|||
const reg = /import\s+([\w\s{}*]+)\s+from\s+(['"])globby(\?locale)?(\?path)?!([^'"]+)\2/g; |
|||
const match = code.match(reg); |
|||
if (!match) return code; |
|||
const lastImport = urlMap.get(path); |
|||
if (lastImport && match) { |
|||
code = code.replace(lastImport, match[0]); |
|||
} |
|||
result = code.replace( |
|||
reg, |
|||
( |
|||
_, |
|||
// variable to export
|
|||
exportName, |
|||
// bare export or not
|
|||
bareExporter, |
|||
// is locale import
|
|||
isLocale, |
|||
// inject _path attr
|
|||
injectPath, |
|||
// path export
|
|||
globPath |
|||
) => { |
|||
const filePath = path.replace('\u0000', ''); // why some path startsWith '\u0000'?
|
|||
// resolve path
|
|||
|
|||
const resolvedFilePath = globPath.startsWith('.') |
|||
? resolver.resolveRelativeRequest(filePath, globPath) |
|||
: { pathname: resolver.requestToFile(globPath) }; |
|||
|
|||
const files = glob.sync(resolvedFilePath.pathname, { dot: true }); |
|||
|
|||
let templateStr = 'import #name# from #file#'; // import default
|
|||
let name = exportName; |
|||
const m = exportName.match(/\{\s*(\w+)(\s+as\s+(\w+))?\s*\}/); // import module
|
|||
const m2 = exportName.match(/\*\s+as\s+(\w+)/); // import * as all module
|
|||
if (m) { |
|||
templateStr = `import { ${m[1]} as #name# } from #file#`; |
|||
name = m[3] || m[1]; |
|||
} else if (m2) { |
|||
templateStr = 'import * as #name# from #file#'; |
|||
name = m2[1]; |
|||
} |
|||
|
|||
const templateRender = template(templateStr); |
|||
|
|||
const groups: Array<string>[] = []; |
|||
const replaceFiles = files.map((f, i) => { |
|||
const fileNameWithAlias = resolver.fileToRequest(f); |
|||
|
|||
const file = bareExporter + fileNameWithAlias + bareExporter; |
|||
|
|||
if (isLocale) { |
|||
const globrexRes = globrex(globPath, { extended: true, globstar: true }); |
|||
|
|||
// Get segments for files like an en/system ch/modules for:
|
|||
// ['en', 'system'] ['ch', 'modules']
|
|||
const matchedGroups = globrexRes.regex.exec(fileNameWithAlias); |
|||
|
|||
if (matchedGroups && matchedGroups.length) { |
|||
const matchedSegments = matchedGroups[1]; //first everytime "Full Match"
|
|||
const name = matchedGroups[2] + '_' + matchedSegments.split('/').shift(); |
|||
//send deep way like an (en/modules/system/dashboard) into groups
|
|||
groups.push([matchedSegments + name, file]); |
|||
return templateRender({ |
|||
name, |
|||
file, |
|||
}); |
|||
} |
|||
} else { |
|||
groups.push([name + i, file]); |
|||
return templateRender({ name: name + i, file }); |
|||
} |
|||
}); |
|||
// save in memory used result
|
|||
const filesJoined = replaceFiles.join('\n'); |
|||
|
|||
urlMap.set(path, filesJoined); |
|||
return [ |
|||
filesJoined, |
|||
compareString(injectPath, groups), |
|||
varTemplate(groups, name), |
|||
'', |
|||
].join('\n'); |
|||
} |
|||
); |
|||
if (isBuild) cache.set(path, result); |
|||
} |
|||
return `${result}${hmr(isBuild)}`; |
|||
}, |
|||
}; |
|||
}; |
|||
export default globTransform; |
|||
@ -0,0 +1,21 @@ |
|||
import type { LocaleType } from '/@/locales/types'; |
|||
import { appStore } from '/@/store/modules/app'; |
|||
|
|||
export function useLocale() { |
|||
/** |
|||
* |
|||
*/ |
|||
function getLocale(): string { |
|||
return appStore.getProjectConfig.locale; |
|||
} |
|||
|
|||
/** |
|||
* |
|||
* @param locale |
|||
*/ |
|||
async function changeLocale(locale: LocaleType): Promise<void> { |
|||
appStore.commitProjectConfigState({ locale: locale }); |
|||
} |
|||
|
|||
return { getLocale, changeLocale }; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import messages from 'globby?locale!/@/locales/lang/**/*.@(ts)'; |
|||
|
|||
export default messages; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
someentry: 'some text', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
some: 'Get Out', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
button: 'Login', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
someentry: 'some text', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
some: 'Get Out', |
|||
}; |
|||
@ -0,0 +1,7 @@ |
|||
export default { |
|||
button: 'Login', |
|||
validation: { |
|||
account: 'Required Field account', |
|||
password: 'Required Field password', |
|||
}, |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
someentry: '一些文本', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
some: '出去', |
|||
}; |
|||
@ -0,0 +1,3 @@ |
|||
export default { |
|||
button: '登录', |
|||
}; |
|||
@ -0,0 +1 @@ |
|||
export type LocaleType = 'zhCN' | 'en' | 'ru' | 'ja'; |
|||
@ -0,0 +1,35 @@ |
|||
import type { App } from 'vue'; |
|||
import type { I18n, Locale, I18nOptions } from 'vue-i18n'; |
|||
|
|||
import { createI18n } from 'vue-i18n'; |
|||
import localeMessages from '/@/locales'; |
|||
import { useLocale } from '/@/hooks/web/useLocale'; |
|||
|
|||
const { getLocale } = useLocale(); |
|||
|
|||
const localeData: I18nOptions = { |
|||
legacy: false, |
|||
locale: getLocale(), |
|||
// TODO: setting fallback inside settings
|
|||
fallbackLocale: 'en', |
|||
messages: localeMessages, |
|||
// availableLocales: ['ru'],
|
|||
sync: true, //If you don’t want to inherit locale from global scope, you need to set sync of i18n component option to false.
|
|||
silentTranslationWarn: false, // true - warning off
|
|||
silentFallbackWarn: true, |
|||
}; |
|||
|
|||
let i18n: I18n; |
|||
|
|||
// setup i18n instance with glob
|
|||
export function setupI18n(app: App) { |
|||
i18n = createI18n(localeData) as I18n; |
|||
setI18nLanguage(getLocale()); |
|||
app.use(i18n); |
|||
} |
|||
|
|||
export function setI18nLanguage(locale: Locale): void { |
|||
// @ts-ignore
|
|||
i18n.global.locale.value = locale; |
|||
// i18n.global.setLocaleMessage(locale, messages);
|
|||
} |
|||
Loading…
Reference in new issue