Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
nd0ut committed Aug 1, 2024
1 parent a8b63cf commit eb34af9
Show file tree
Hide file tree
Showing 85 changed files with 3,120 additions and 1,449 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/checks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ jobs:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '16'
node-version: '20'
- name: Install dependencies
working-directory: ./
run: npm ci
Expand Down
3 changes: 1 addition & 2 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ jobs:
with:
languages: ${{ matrix.language }}
queries: +security-and-quality
paths-ignore:
- '**/*.test-d.ts(x?)'
paths-ignore: "**/*.test-d.ts(x?)"
- name: Autobuild
uses: github/codeql-action/autobuild@v2

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/shipjs-manual-prepare.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:
ref: main
- uses: actions/setup-node@v2
with:
node-version: '16'
node-version: '20'
- run: npm ci
- run: |
git config --global user.email "github-actions[bot]@users.noreply.github.com"
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/shipjs-trigger.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
- uses: actions/setup-node@v2
with:
registry-url: "https://registry.npmjs.org"
node-version: '16'
node-version: '20'
- run: npm ci
- run: |
git config --global user.email "github-actions[bot]@users.noreply.github.com"
Expand Down
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
20
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ We use [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/int
href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
/>

<uc-file-uploader-regular ctx-name="my-uploader"> </uc-file-uploader-regular>
<uc-file-uploader-regular ctx="my-uploader"> </uc-file-uploader-regular>
```

3. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
Expand All @@ -109,7 +109,7 @@ UC.defineComponents(UC);
href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
/>

<uc-file-uploader-inline ctx-name="my-uploader"> </uc-file-uploader-inline>
<uc-file-uploader-inline ctx="my-uploader"> </uc-file-uploader-inline>
```

4. Configure Uploadcare File Uploader and add your personal public key to the project. Discover the instructions in the [following section](#configuration).
Expand All @@ -123,10 +123,10 @@ All configurations in Uploadcare File Uploader are managed from `uc-config` bloc
3. Add a `uc-config` block to your markup and replace `YOUR_PUBLIC_KEY` with your own public key:

```html
<uc-config ctx-name="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
<uc-config ctx="my-uploader" pubkey="YOUR_PUBLIC_KEY"></uc-config>
```

4. Make sure that your config block uses the same `ctx-name` attribute value as your solution block.
4. Make sure that your config block uses the same `ctx` attribute value as your solution block.

Discover more about Uploadcare File Uploader configuration in [our documentation](https://uploadcare.com/docs/file-uploader/configuration/?ref=github-readme).

Expand Down
2 changes: 2 additions & 0 deletions abstract/ActivityBlock.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export class ActivityBlock extends Block {
this.setAttribute('activity', this.activityType);
}
this.sub('*currentActivity', (/** @type {String} */ val) => {
if (this.activityType === 'url') {
}
if (this.activityType !== val && this[ACTIVE_PROP]) {
this._deactivate();
} else if (this.activityType === val && !this[ACTIVE_PROP]) {
Expand Down
55 changes: 37 additions & 18 deletions abstract/Block.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
// @ts-check
import { BaseComponent, Data } from '@symbiotejs/symbiote';
import { DICT, PubSub, Symbiote } from '@symbiotejs/symbiote';
// @ts-ignore - something wrong with the tsd
import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
import { initialConfig } from '../blocks/Config/initialConfig.js';
import { EventEmitter } from '../blocks/UploadCtxProvider/EventEmitter.js';
import { WindowHeightTracker } from '../utils/WindowHeightTracker.js';
import { extractFilename, extractCdnUrlModifiers, extractUuid } from '../utils/cdn-utils.js';
import { extractCdnUrlModifiers, extractFilename, extractUuid } from '../utils/cdn-utils.js';
import { getLocaleDirection } from '../utils/getLocaleDirection.js';
import { getPluralForm } from '../utils/getPluralForm.js';
import { applyTemplateData, getPluralObjects } from '../utils/template-utils.js';
import { waitForAttribute } from '../utils/waitForAttribute.js';
import { blockCtx } from './CTX.js';
import { LocaleManager, localeStateKey } from './LocaleManager.js';
import { A11y } from './a11y.js';
import { l10nProcessor } from './l10nProcessor.js';
import { sharedConfigKey } from './sharedConfigKey.js';
import { A11y } from './a11y.js';
import { bindCompatibilityFallbackProcessor } from './bindCompatibilityFallbackProcessor.js';

const TAG_PREFIX = 'uc-';
const CTX_NAME_FALLBACK_ATTR = 'ctx-name';

// @ts-ignore TODO: fix this
export class Block extends BaseComponent {
export class Block extends Symbiote {
/** @type {string | null} */
static StateConsumerScope = null;

Expand Down Expand Up @@ -78,8 +82,12 @@ export class Block extends BaseComponent {
super();
/** @type {Map<string, Set<{ remove: () => void }>>} */
this.l10nProcessorSubs = new Map();
// @ts-ignore TODO: fix this
// @ts-expect-error TODO: fix this
this.addTemplateProcessor(l10nProcessor);
this.addTemplateProcessor(slotProcessor);

// Prepend tpl processors with bind compatibility fallback processor
this.tplProcessors = new Set([bindCompatibilityFallbackProcessor, ...this.tplProcessors]);
}

/**
Expand Down Expand Up @@ -135,17 +143,29 @@ export class Block extends BaseComponent {
this.processInnerHtml = true;
}
if (this.requireCtxName) {
waitForAttribute({
element: this,
attribute: 'ctx-name',
onSuccess: () => {
// async wait for ctx-name attribute to be set, needed for Angular because it sets attributes after mount
Promise.race([
waitForAttribute({
element: this,
attribute: DICT.CTX_NAME_ATTR,
}),
waitForAttribute({
element: this,
attribute: CTX_NAME_FALLBACK_ATTR,
}),
]).then((result) => {
if (result.success) {
if (result.attribute === CTX_NAME_FALLBACK_ATTR) {
const ctxName = result.value;
this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxName}'`);
}
// async wait for ctx attribute to be set, needed for Angular because it sets attributes after mount
// TODO: should be moved to the symbiote core
super.connectedCallback();
},
onTimeout: () => {
console.error('Attribute `ctx-name` is required and it is not set.');
},
} else {
console.error(
`Attribute "${DICT.CTX_NAME_ATTR}" or "${CTX_NAME_FALLBACK_ATTR}" is required and it is not set.`,
);
}
});
} else {
super.connectedCallback();
Expand Down Expand Up @@ -217,7 +237,7 @@ export class Block extends BaseComponent {

// Destroy local context
// TODO: this should be done inside symbiote
Data.deleteCtx(this);
PubSub.deleteCtx(this.localCtx.uid);

if (blocksRegistry?.size === 0) {
setTimeout(() => {
Expand All @@ -233,7 +253,7 @@ export class Block extends BaseComponent {
* @protected
*/
destroyCtxCallback() {
Data.deleteCtx(this.ctxName);
PubSub.deleteCtx(this.ctxName);

this.localeManager?.destroy();
}
Expand Down Expand Up @@ -327,6 +347,7 @@ export class Block extends BaseComponent {
const resolver = args[0];
consoleArgs = resolver();
}

console.log(`[${this.ctxName}]`, ...consoleArgs);
}

Expand All @@ -341,5 +362,3 @@ export class Block extends BaseComponent {
}
}
}

export { BaseComponent };
8 changes: 4 additions & 4 deletions abstract/TypedCollection.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Data, UID } from '@symbiotejs/symbiote';
import { PubSub, UID } from '@symbiotejs/symbiote';
import { TypedData } from './TypedData.js';

export class TypedCollection {
Expand All @@ -22,9 +22,9 @@ export class TypedCollection {
this.__ctxId = options.ctxName || UID.generate();
/**
* @private
* @type {Data}
* @type {PubSub}
*/
this.__data = Data.registerCtx({}, this.__ctxId);
this.__data = PubSub.registerCtx({}, this.__ctxId);
/**
* @private
* @type {string[]}
Expand Down Expand Up @@ -232,7 +232,7 @@ export class TypedCollection {
}

destroy() {
Data.deleteCtx(this.__ctxId);
PubSub.deleteCtx(this.__ctxId);
this.__propertyObservers = null;
this.__collectionObservers = null;
for (let id in this.__subsMap) {
Expand Down
8 changes: 4 additions & 4 deletions abstract/TypedData.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Data, UID } from '@symbiotejs/symbiote';
import { PubSub, UID } from '@symbiotejs/symbiote';

const MSG_NAME = '[Typed State] Wrong property name: ';
const MSG_TYPE = '[Typed State] Wrong property type: ';
Expand All @@ -20,9 +20,9 @@ export class TypedData {
}, {});
/**
* @private
* @type {Data}
* @type {PubSub}
*/
this.__data = Data.registerCtx(this.__schema, this.__ctxId);
this.__data = PubSub.registerCtx(this.__schema, this.__ctxId);
}

/** @returns {String} */
Expand Down Expand Up @@ -72,6 +72,6 @@ export class TypedData {
}

remove() {
Data.deleteCtx(this.__ctxId);
PubSub.deleteCtx(this.__ctxId);
}
}
10 changes: 5 additions & 5 deletions abstract/UploaderBlock.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-check
import { ActivityBlock } from './ActivityBlock.js';

import { Data } from '@symbiotejs/symbiote';
import { PubSub } from '@symbiotejs/symbiote';
import { uploadFileGroup } from '@uploadcare/upload-client';
import { calculateMaxCenteredCropFrame } from '../blocks/CloudImageEditor/src/crop-utils.js';
import { parseCropPreset } from '../blocks/CloudImageEditor/src/lib/parseCropPreset.js';
Expand Down Expand Up @@ -234,7 +234,7 @@ export class UploaderBlock extends ActivityBlock {

if (changeMap.uploadProgress) {
for (const entryId of changeMap.uploadProgress) {
const { isUploading, silent } = Data.getCtx(entryId).store;
const { isUploading, silent } = PubSub.getCtx(entryId).store;
if (isUploading && !silent) {
this.emit(EventType.FILE_UPLOAD_PROGRESS, this.api.getOutputItem(entryId));
}
Expand All @@ -244,15 +244,15 @@ export class UploaderBlock extends ActivityBlock {
}
if (changeMap.isUploading) {
for (const entryId of changeMap.isUploading) {
const { isUploading, silent } = Data.getCtx(entryId).store;
const { isUploading, silent } = PubSub.getCtx(entryId).store;
if (isUploading && !silent) {
this.emit(EventType.FILE_UPLOAD_START, this.api.getOutputItem(entryId));
}
}
}
if (changeMap.fileInfo) {
for (const entryId of changeMap.fileInfo) {
const { fileInfo, silent } = Data.getCtx(entryId).store;
const { fileInfo, silent } = PubSub.getCtx(entryId).store;
if (fileInfo && !silent) {
this.emit(EventType.FILE_UPLOAD_SUCCESS, this.api.getOutputItem(entryId));
}
Expand All @@ -263,7 +263,7 @@ export class UploaderBlock extends ActivityBlock {
}
if (changeMap.errors) {
for (const entryId of changeMap.errors) {
const { errors } = Data.getCtx(entryId).store;
const { errors } = PubSub.getCtx(entryId).store;
if (errors.length > 0) {
this.emit(EventType.FILE_UPLOAD_FAILED, this.api.getOutputItem(entryId));
this.emit(
Expand Down
6 changes: 3 additions & 3 deletions abstract/UploaderPublicApi.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// @ts-check
import { ActivityBlock } from './ActivityBlock.js';

import { Data } from '@symbiotejs/symbiote';
import { PubSub } from '@symbiotejs/symbiote';
import { EventType } from '../blocks/UploadCtxProvider/EventEmitter.js';
import { UploadSource } from '../blocks/utils/UploadSource.js';
import { serializeCsv } from '../blocks/utils/comma-separated.js';
import { IMAGE_ACCEPT_LIST, fileIsImage, mergeFileTypes } from '../utils/fileTypes.js';
import { parseCdnUrl } from '../utils/parseCdnUrl.js';
import { buildOutputCollectionState } from './buildOutputCollectionState.js';
import { stringToArray } from '../utils/stringToArray.js';
import { buildOutputCollectionState } from './buildOutputCollectionState.js';

export class UploaderPublicApi {
/**
Expand Down Expand Up @@ -176,7 +176,7 @@ export class UploaderPublicApi {
* @returns {import('../types/exported.js').OutputFileEntry<TStatus>}
*/
getOutputItem = (entryId) => {
const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (Data.getCtx(entryId).store);
const uploadEntryData = /** @type {import('./uploadEntrySchema.js').UploadEntry} */ (PubSub.getCtx(entryId).store);

/** @type {import('@uploadcare/upload-client').UploadcareFile?} */
const fileInfo = uploadEntryData.fileInfo;
Expand Down
16 changes: 16 additions & 0 deletions abstract/bindCompatibilityFallbackProcessor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// @ts-check

import { DICT } from '@symbiotejs/symbiote';

const FALLBACK_BIND_ATTR = 'set';

/** @param {DocumentFragment} fr */
export function bindCompatibilityFallbackProcessor(fr) {
[...fr.querySelectorAll(`[${FALLBACK_BIND_ATTR}]`)].forEach((el) => {
const setAttrValue = el.getAttribute(FALLBACK_BIND_ATTR);
if (setAttrValue) {
el.removeAttribute(FALLBACK_BIND_ATTR);
el.setAttribute(DICT.BIND_ATTR, setAttrValue);
}
});
}
5 changes: 5 additions & 0 deletions abstract/defineComponents.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
const EXCLUDE_COMPONENTS = ['Symbiote', 'BaseComponent', 'UploaderBlock', 'ActivityBlock', 'Block', 'SolutionBlock'];

/** @param {Object<string, any>} blockExports */
export function defineComponents(blockExports) {
for (let blockName in blockExports) {
if (EXCLUDE_COMPONENTS.includes(blockName)) {
continue;
}
let tagName = [...blockName].reduce((name, char) => {
if (char.toUpperCase() === char) {
char = '-' + char.toLowerCase();
Expand Down
6 changes: 3 additions & 3 deletions abstract/l10nProcessor.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export function l10nProcessor(fr, fnCtx) {
// We don't need the leading * in the key because we use the key as a local context key relative to the global state
const nodeStateKey = localeStateKey(mappedKey).replace('*', '');
// If the key is not present in the node context, add it
if (!fnCtx.nodeCtx.has(nodeStateKey)) {
fnCtx.nodeCtx.add(nodeStateKey, mappedKey);
if (!fnCtx.sharedCtx.has(nodeStateKey)) {
fnCtx.sharedCtx.add(nodeStateKey, mappedKey);
}
// Subscribe on the global l10n key change
const sub = fnCtx.nodeCtx.sub(nodeStateKey, () => {
const sub = fnCtx.sharedCtx.sub(nodeStateKey, () => {
el[/** @type {'textContent'} */ (elProp)] = fnCtx.l10n(mappedKey);
});
keySubs?.add(sub);
Expand Down
2 changes: 1 addition & 1 deletion abstract/uploadEntrySchema.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export const uploadEntrySchema = Object.freeze({
},
source: {
type: String,
value: false,
value: null,
nullable: true,
},
fullPath: {
Expand Down
Loading

0 comments on commit eb34af9

Please sign in to comment.