feat: bundle assets with content (#2958)
* fix(media_folder_relative): use collection name in unpublished entry * refactor: pass arguments as object to AssetProxy ctor * feat: support media folders per collection * feat: resolve media files path based on entry path * fix: asset public path resolving * refactor: introduce typescript for AssetProxy * refactor: code cleanup * refactor(asset-proxy): add tests,switch to typescript,extract arguments * refactor: typescript for editorialWorkflow * refactor: add typescript for media library actions * refactor: fix type error on map set * refactor: move locale selector into reducer * refactor: add typescript for entries actions * refactor: remove duplication between asset store and media lib * feat: load assets from backend using API * refactor(github): add typescript, cache media files * fix: don't load media URL if already loaded * feat: add media folder config to collection * fix: load assets from API when not in UI state * feat: load entry media files when opening media library * fix: editorial workflow draft media files bug fixes * test(unit): fix unit tests * fix: editor control losing focus * style: add eslint object-shorthand rule * test(cypress): re-record mock data * fix: fix non github backends, large media * test: uncomment only in tests * fix(backend-test): add missing displayURL property * test(e2e): add media library tests * test(e2e): enable visual testing * test(e2e): add github backend media library tests * test(e2e): add git-gateway large media tests * chore: post rebase fixes * test: fix tests * test: fix tests * test(cypress): fix tests * docs: add media_folder docs * test(e2e): add media library delete test * test(e2e): try and fix image comparison on CI * ci: reduce test machines from 9 to 8 * test: add reducers and selectors unit tests * test(e2e): disable visual regression testing for now * test: add getAsset unit tests * refactor: use Asset class component instead of hooks * build: don't inline source maps * test: add more media path tests
This commit is contained in:
committed by
Shawn Erquhart
parent
7e4d4c1cc4
commit
2b41d8a838
55
packages/netlify-cms-lib-util/index.d.ts
vendored
Normal file
55
packages/netlify-cms-lib-util/index.d.ts
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
declare module 'netlify-cms-lib-util' {
|
||||
export const isAbsolutePath: (path: string) => boolean;
|
||||
export const basename: (path: string, extension?: string) => string;
|
||||
|
||||
export const EDITORIAL_WORKFLOW_ERROR: 'EDITORIAL_WORKFLOW_ERROR';
|
||||
|
||||
export const getBlobSHA: (blob: Blob) => string;
|
||||
|
||||
export interface CursorType {
|
||||
create: (args: unknown) => Cursor;
|
||||
updateStore: (args: unknown) => void;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
unwrapData: () => [Map<string, any>, CursorType];
|
||||
actions: Set;
|
||||
data: Map;
|
||||
meta: Map;
|
||||
store: Map;
|
||||
}
|
||||
|
||||
export const Cursor: CursorType;
|
||||
|
||||
export const CURSOR_COMPATIBILITY_SYMBOL = Symbol(
|
||||
'cursor key for compatibility with old backends',
|
||||
);
|
||||
|
||||
export class APIError extends Error {
|
||||
status: number;
|
||||
constructor(message?: string, responseStatus: number, backend: string);
|
||||
}
|
||||
|
||||
export class EditorialWorkflowError extends Error {
|
||||
constructor(message?: string, notUnderEditorialWorkflow: boolean);
|
||||
|
||||
notUnderEditorialWorkflow: boolean;
|
||||
}
|
||||
|
||||
export const getAllResponses: (url: string, options: RequestInit) => Promise<Response[]>;
|
||||
export const flowAsync: (funcs: Function[]) => () => Promise<unknown>;
|
||||
|
||||
export const localForage: {
|
||||
setItem: <T>(key: string, item: T) => Promise<T>;
|
||||
getItem: <T>(key: string) => Promise<T | null>;
|
||||
removeItem: (key: string) => Promise<void>;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const onlySuccessfulPromises: (...args: any[]) => any;
|
||||
export const resolvePromiseProperties: (
|
||||
object: Record<string, Promise<unknown>>,
|
||||
) => Promise<unknown>;
|
||||
|
||||
export type ResponseParser<T> = (res: Response) => Promise<T>;
|
||||
|
||||
export const responseParser: ({ format }: { format: 'blob' | 'json' | 'text' }) => ResponseParser;
|
||||
}
|
@ -17,7 +17,6 @@
|
||||
"build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
|
||||
},
|
||||
"dependencies": {
|
||||
"get-relative-path": "^1.0.2",
|
||||
"js-sha256": "^0.9.0",
|
||||
"localforage": "^1.7.3"
|
||||
},
|
||||
|
@ -1,93 +1,4 @@
|
||||
import { resolveMediaFilename, fileExtensionWithSeparator, fileExtension } from '../path';
|
||||
|
||||
describe('resolveMediaFilename', () => {
|
||||
it('publicly Accessible URL, no slash', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
publicFolder: 'static/assets',
|
||||
}),
|
||||
).toEqual('/static/assets/image.png');
|
||||
});
|
||||
|
||||
it('publicly Accessible URL, with slash', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
publicFolder: '/static/assets',
|
||||
}),
|
||||
).toEqual('/static/assets/image.png');
|
||||
});
|
||||
|
||||
it('publicly Accessible URL, root', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
publicFolder: '/',
|
||||
}),
|
||||
).toEqual('/image.png');
|
||||
});
|
||||
|
||||
it('relative URL, same folder', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/posts',
|
||||
collectionFolder: '/content/posts',
|
||||
}),
|
||||
).toEqual('image.png');
|
||||
});
|
||||
|
||||
it('relative URL, same folder, with slash', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/posts/',
|
||||
collectionFolder: '/content/posts',
|
||||
}),
|
||||
).toEqual('image.png');
|
||||
});
|
||||
|
||||
it('relative URL, same folder, with slashes', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/posts/',
|
||||
collectionFolder: '/content/posts/',
|
||||
}),
|
||||
).toEqual('image.png');
|
||||
});
|
||||
|
||||
it('relative URL, sibling folder', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/images/',
|
||||
collectionFolder: '/content/posts/',
|
||||
}),
|
||||
).toEqual('../images/image.png');
|
||||
});
|
||||
|
||||
it('relative URL, cousin folder', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/images/pngs/',
|
||||
collectionFolder: '/content/markdown/posts/',
|
||||
}),
|
||||
).toEqual('../../images/pngs/image.png');
|
||||
});
|
||||
|
||||
it('relative URL, parent folder', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/',
|
||||
collectionFolder: '/content/posts',
|
||||
}),
|
||||
).toEqual('../image.png');
|
||||
});
|
||||
|
||||
it('relative URL, child folder', () => {
|
||||
expect(
|
||||
resolveMediaFilename('image.png', {
|
||||
mediaFolder: '/content/images',
|
||||
collectionFolder: '/content/',
|
||||
}),
|
||||
).toEqual('images/image.png');
|
||||
});
|
||||
});
|
||||
import { fileExtensionWithSeparator, fileExtension } from '../path';
|
||||
|
||||
describe('fileExtensionWithSeparator', () => {
|
||||
it('should return the extension of a file', () => {
|
||||
|
@ -2,13 +2,7 @@ import APIError from './APIError';
|
||||
import Cursor, { CURSOR_COMPATIBILITY_SYMBOL } from './Cursor';
|
||||
import EditorialWorkflowError, { EDITORIAL_WORKFLOW_ERROR } from './EditorialWorkflowError';
|
||||
import localForage from './localForage';
|
||||
import {
|
||||
resolvePath,
|
||||
resolveMediaFilename,
|
||||
basename,
|
||||
fileExtensionWithSeparator,
|
||||
fileExtension,
|
||||
} from './path';
|
||||
import { isAbsolutePath, basename, fileExtensionWithSeparator, fileExtension } from './path';
|
||||
import {
|
||||
filterPromises,
|
||||
filterPromisesWith,
|
||||
@ -36,8 +30,6 @@ export const NetlifyCmsLibUtil = {
|
||||
EditorialWorkflowError,
|
||||
EDITORIAL_WORKFLOW_ERROR,
|
||||
localForage,
|
||||
resolvePath,
|
||||
resolveMediaFilename,
|
||||
basename,
|
||||
fileExtensionWithSeparator,
|
||||
fileExtension,
|
||||
@ -62,8 +54,6 @@ export {
|
||||
EditorialWorkflowError,
|
||||
EDITORIAL_WORKFLOW_ERROR,
|
||||
localForage,
|
||||
resolvePath,
|
||||
resolveMediaFilename,
|
||||
basename,
|
||||
fileExtensionWithSeparator,
|
||||
fileExtension,
|
||||
@ -82,4 +72,5 @@ export {
|
||||
loadScript,
|
||||
getBlobSHA,
|
||||
asyncLock,
|
||||
isAbsolutePath,
|
||||
};
|
||||
|
@ -1,53 +1,8 @@
|
||||
import getRelativePath from 'get-relative-path';
|
||||
|
||||
const absolutePath = new RegExp('^(?:[a-z]+:)?//', 'i');
|
||||
const normalizePath = path => path.replace(/[\\/]+/g, '/');
|
||||
|
||||
export function resolvePath(path, basePath) {
|
||||
// No path provided, skip
|
||||
if (!path) return null;
|
||||
|
||||
// It's an absolute path.
|
||||
if (absolutePath.test(path)) return path;
|
||||
|
||||
if (path.indexOf('/') === -1) {
|
||||
// It's a single file name, no directories. Prepend public folder
|
||||
return normalizePath(`/${basePath}/${path}`);
|
||||
}
|
||||
|
||||
// It's a relative path. Prepend a forward slash.
|
||||
return normalizePath(`/${path}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Take a media filename and resolve it with respect to a
|
||||
* certain collection entry, either as an absolute URL, or
|
||||
* a path relative to the collection entry's folder.
|
||||
*
|
||||
* @param {*} filename the filename of the media item within the media_folder
|
||||
* @param {*} options how the filename should be resolved, see examples below:
|
||||
*
|
||||
* @example Resolving to publicly accessible URL
|
||||
* mediaFilenameToUse('image.jpg', {
|
||||
* publicFolder: '/static/assets' // set by public_folder
|
||||
* }) // -> "/static/assets/image.jpg"
|
||||
*
|
||||
* @example Resolving URL relatively to a specific collection entry
|
||||
* mediaFilenameToUse('image.jpg', {
|
||||
* mediaFolder: '/content/media', // set by media_folder
|
||||
* collectionFolder: 'content/posts'
|
||||
* }) // -> "../media/image.jpg"
|
||||
*
|
||||
*/
|
||||
export function resolveMediaFilename(filename, options) {
|
||||
if (options.publicFolder) {
|
||||
return resolvePath(filename, options.publicFolder);
|
||||
} else if (options.mediaFolder && options.collectionFolder) {
|
||||
const media = normalizePath(`/${options.mediaFolder}/${filename}`);
|
||||
const collection = normalizePath(`/${options.collectionFolder}/`);
|
||||
return getRelativePath(collection, media);
|
||||
}
|
||||
throw new Error('incorrect usage');
|
||||
export function isAbsolutePath(path) {
|
||||
return absolutePath.test(path);
|
||||
}
|
||||
|
||||
/**
|
||||
|
Reference in New Issue
Block a user