Merge pull request #27 from golemcloud/formdata-blob

Added support for FormData, Blob and File

Author: vigoo

README.md

@@ -262,6 +262,9 @@ Only if the `http` feature flag is enabled in the generated crate. It depends on
 - `fetch`
 - `Headers`
 - `Response`
+- `FormData`
+- `Blob`
+- `File`
 
 #### Streams
 
@@ -288,6 +291,14 @@ Implemented by https://github.com/MattiasBuelens/web-streams-polyfill
 - `clearInterval`
 - `setImmediate`
 
+
+#### Encoding
+
+- `TextEncoder`
+- `TextDecoder`
+- `TextDecoderStream`
+- `TextEncoderStream`
+
 ### Coming from QuickJS
 
 - Global:

crates/wasm-rquickjs/skeleton/src/builtin/fetch-blob-4.0.0.js

@@ -0,0 +1,285 @@
+/*! fetch-blob. MIT License. Jimmy Wärting <https://jimmy.warting.se/opensource> */
+
+// 64 KiB (same size chrome slice theirs blob into Uint8array's)
+const POOL_SIZE = 65536
+
+/**
+ * @param {(Blob | Uint8Array)[]} parts
+ * @param {boolean} clone
+ * @returns {AsyncIterableIterator<Uint8Array>}
+ */
+async function * toIterator (parts, clone) {
+    for (const part of parts) {
+        if (ArrayBuffer.isView(part)) {
+            if (clone) {
+                let position = part.byteOffset
+                const end = part.byteOffset + part.byteLength
+                while (position !== end) {
+                    const size = Math.min(end - position, POOL_SIZE)
+                    const chunk = part.buffer.slice(position, position + size)
+                    position += chunk.byteLength
+                    yield new Uint8Array(chunk)
+                }
+            } else {
+                yield part
+            }
+        } else {
+            // @ts-ignore TS Think blob.stream() returns a node:stream
+            yield * part.stream()
+        }
+    }
+}
+
+const _Blob = class Blob {
+    /** @type {Array.<(Blob|Uint8Array)>} */
+    #parts = []
+    #type = ''
+    #size = 0
+    #endings = 'transparent'
+
+    /**
+     * The Blob() constructor returns a new Blob object. The content
+     * of the blob consists of the concatenation of the values given
+     * in the parameter array.
+     *
+     * @param {*} blobParts
+     * @param {{ type?: string, endings?: string }} [options]
+     */
+    constructor (blobParts = [], options = {}) {
+        if (typeof blobParts !== 'object' || blobParts === null) {
+            throw new TypeError('Failed to construct \'Blob\': The provided value cannot be converted to a sequence.')
+        }
+
+        if (typeof blobParts[Symbol.iterator] !== 'function') {
+            throw new TypeError('Failed to construct \'Blob\': The object must have a callable @@iterator property.')
+        }
+
+        if (typeof options !== 'object' && typeof options !== 'function') {
+            throw new TypeError('Failed to construct \'Blob\': parameter 2 cannot convert to dictionary.')
+        }
+
+        if (options === null) options = {}
+
+        const encoder = new TextEncoder()
+        for (const element of blobParts) {
+            let part
+            if (ArrayBuffer.isView(element)) {
+                part = new Uint8Array(element.buffer.slice(element.byteOffset, element.byteOffset + element.byteLength))
+            } else if (element instanceof ArrayBuffer) {
+                part = new Uint8Array(element.slice(0))
+            } else if (element instanceof Blob) {
+                part = element
+            } else {
+                part = encoder.encode(`${element}`)
+            }
+
+            const size = ArrayBuffer.isView(part) ? part.byteLength : part.size
+            // Avoid pushing empty parts into the array to better GC them
+            if (size) {
+                this.#size += size
+                this.#parts.push(part)
+            }
+        }
+
+        this.#endings = `${options.endings === undefined ? 'transparent' : options.endings}`
+        const type = options.type === undefined ? '' : String(options.type)
+        this.#type = /^[\x20-\x7E]*$/.test(type) ? type : ''
+    }
+
+    /**
+     * The Blob interface's size property returns the
+     * size of the Blob in bytes.
+     */
+    get size () {
+        return this.#size
+    }
+
+    /**
+     * The type property of a Blob object returns the MIME type of the file.
+     */
+    get type () {
+        return this.#type
+    }
+
+    /**
+     * The text() method in the Blob interface returns a Promise
+     * that resolves with a string containing the contents of
+     * the blob, interpreted as UTF-8.
+     *
+     * @return {Promise<string>}
+     */
+    async text () {
+        // More optimized than using this.arrayBuffer()
+        // that requires twice as much ram
+        const decoder = new TextDecoder()
+        let str = ''
+        for await (const part of toIterator(this.#parts, false)) {
+            str += decoder.decode(part, { stream: true })
+        }
+        // Remaining
+        str += decoder.decode()
+        return str
+    }
+
+    /**
+     * The arrayBuffer() method in the Blob interface returns a
+     * Promise that resolves with the contents of the blob as
+     * binary data contained in an ArrayBuffer.
+     *
+     * @return {Promise<ArrayBuffer>}
+     */
+    async arrayBuffer () {
+        const data = new Uint8Array(this.size)
+        let offset = 0
+        for await (const chunk of toIterator(this.#parts, false)) {
+            data.set(chunk, offset)
+            offset += chunk.length
+        }
+
+        return data.buffer
+    }
+
+    stream () {
+        const it = toIterator(this.#parts, true)
+
+        return new globalThis.ReadableStream({
+            // @ts-ignore
+            type: 'bytes',
+            async pull (ctrl) {
+                const chunk = await it.next()
+                chunk.done ? ctrl.close() : ctrl.enqueue(chunk.value)
+            },
+
+            async cancel () {
+                await it.return()
+            }
+        })
+    }
+
+    /**
+     * The Blob interface's slice() method creates and returns a
+     * new Blob object which contains data from a subset of the
+     * blob on which it's called.
+     *
+     * @param {number} [start]
+     * @param {number} [end]
+     * @param {string} [type]
+     */
+    slice (start = 0, end = this.size, type = '') {
+        const { size } = this
+
+        let relativeStart = start < 0 ? Math.max(size + start, 0) : Math.min(start, size)
+        let relativeEnd = end < 0 ? Math.max(size + end, 0) : Math.min(end, size)
+
+        const span = Math.max(relativeEnd - relativeStart, 0)
+        const parts = this.#parts
+        const blobParts = []
+        let added = 0
+
+        for (const part of parts) {
+            // don't add the overflow to new blobParts
+            if (added >= span) {
+                break
+            }
+
+            const size = ArrayBuffer.isView(part) ? part.byteLength : part.size
+            if (relativeStart && size <= relativeStart) {
+                // Skip the beginning and change the relative
+                // start & end position as we skip the unwanted parts
+                relativeStart -= size
+                relativeEnd -= size
+            } else {
+                let chunk
+                if (ArrayBuffer.isView(part)) {
+                    chunk = part.subarray(relativeStart, Math.min(size, relativeEnd))
+                    added += chunk.byteLength
+                } else {
+                    chunk = part.slice(relativeStart, Math.min(size, relativeEnd))
+                    added += chunk.size
+                }
+                relativeEnd -= size
+                blobParts.push(chunk)
+                relativeStart = 0 // All next sequential parts should start at 0
+            }
+        }
+
+        const blob = new Blob([], { type: `${type}` })
+        blob.#size = span
+        blob.#parts = blobParts
+
+        return blob
+    }
+
+    get [Symbol.toStringTag] () {
+        return 'Blob'
+    }
+
+    static [Symbol.hasInstance] (object) {
+        return (
+            object &&
+            typeof object === 'object' &&
+            typeof object.constructor === 'function' &&
+            (
+                typeof object.stream === 'function' ||
+                typeof object.arrayBuffer === 'function'
+            ) &&
+            /^(Blob|File)$/.test(object[Symbol.toStringTag])
+        )
+    }
+}
+
+Object.defineProperties(_Blob.prototype, {
+    size: { enumerable: true },
+    type: { enumerable: true },
+    slice: { enumerable: true }
+})
+
+/** @type {typeof globalThis.Blob} */
+export const Blob = _Blob
+
+const _File = class File extends Blob {
+    #lastModified = 0
+    #name = ''
+
+    /**
+     * @param {*[]} fileBits
+     * @param {string} fileName
+     * @param {{lastModified?: number, type?: string}} options
+     */// @ts-ignore
+    constructor (fileBits, fileName, options = {}) {
+        if (arguments.length < 2) {
+            throw new TypeError(`Failed to construct 'File': 2 arguments required, but only ${arguments.length} present.`)
+        }
+        super(fileBits, options)
+
+        if (options === null) options = {}
+
+        // Simulate WebIDL type casting for NaN value in lastModified option.
+        const lastModified = options.lastModified === undefined ? Date.now() : Number(options.lastModified)
+        if (!Number.isNaN(lastModified)) {
+            this.#lastModified = lastModified
+        }
+
+        this.#name = String(fileName)
+    }
+
+    get name () {
+        return this.#name
+    }
+
+    get lastModified () {
+        return this.#lastModified
+    }
+
+    get [Symbol.toStringTag] () {
+        return 'File'
+    }
+
+    static [Symbol.hasInstance] (object) {
+        return !!object && object instanceof Blob &&
+            /^(File)$/.test(object[Symbol.toStringTag])
+    }
+}
+
+/** @type {typeof globalThis.File} */// @ts-ignore
+export const File = _File

crates/wasm-rquickjs/skeleton/src/builtin/formdata-polyfill-4.0.10.js

@@ -0,0 +1,39 @@
+/*! formdata-polyfill. MIT License. Jimmy Wärting <https://jimmy.warting.se/opensource> */
+
+import { Blob as C, File as F} from '__wasm_rquickjs_builtin/http_blob'
+
+var {toStringTag:t,iterator:i,hasInstance:h}=Symbol,
+    r=Math.random,
+    m='append,set,get,getAll,delete,keys,values,entries,forEach,constructor'.split(','),
+    f=(a,b,c)=>(a+='',/^(Blob|File)$/.test(b && b[t])?[(c=c!==void 0?c+'':b[t]=='File'?b.name:'blob',a),b.name!==c||b[t]=='blob'?new F([b],c,b):b]:[a,b+'']),
+    e=(c,f)=>(f?c:c.replace(/\r?\n|\r/g,'\r\n')).replace(/\n/g,'%0A').replace(/\r/g,'%0D').replace(/"/g,'%22'),
+    x=(n, a, e)=>{if(a.length<e){throw new TypeError(`Failed to execute '${n}' on 'FormData': ${e} arguments required, but only ${a.length} present.`)}}
+
+export const File = F
+
+/** @type {typeof globalThis.FormData} */
+export const FormData = class FormData {
+    #d=[];
+    constructor(...a){if(a.length)throw new TypeError(`Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.`)}
+    get [t]() {return 'FormData'}
+    [i](){return this.entries()}
+    static [h](o) {return o&&typeof o==='object'&&o[t]==='FormData'&&!m.some(m=>typeof o[m]!='function')}
+    append(...a){x('append',arguments,2);this.#d.push(f(...a))}
+    delete(a){x('delete',arguments,1);a+='';this.#d=this.#d.filter(([b])=>b!==a)}
+    get(a){x('get',arguments,1);a+='';for(var b=this.#d,l=b.length,c=0;c<l;c++)if(b[c][0]===a)return b[c][1];return null}
+    getAll(a,b){x('getAll',arguments,1);b=[];a+='';this.#d.forEach(c=>c[0]===a&&b.push(c[1]));return b}
+    has(a){x('has',arguments,1);a+='';return this.#d.some(b=>b[0]===a)}
+    forEach(a,b){x('forEach',arguments,1);for(var [c,d]of this)a.call(b,d,c,this)}
+    set(...a){x('set',arguments,2);var b=[],c=!0;a=f(...a);this.#d.forEach(d=>{d[0]===a[0]?c&&(c=!b.push(a)):b.push(d)});c&&b.push(a);this.#d=b}
+    *entries(){yield*this.#d}
+    *keys(){for(var[a]of this)yield a}
+    *values(){for(var[,a]of this)yield a}}
+
+/** @param {FormData} F */
+export function formDataToBlob (F,B=C){
+    var b=`${r()}${r()}`.replace(/\./g, '').slice(-28).padStart(32, '-'),c=[],p=`--${b}\r\nContent-Disposition: form-data; name="`
+    F.forEach((v,n)=>typeof v=='string'
+        ?c.push(p+e(n)+`"\r\n\r\n${v.replace(/\r(?!\n)|(?<!\r)\n/g, '\r\n')}\r\n`)
+        :c.push(p+e(n)+`"; filename="${e(v.name, 1)}"\r\nContent-Type: ${v.type||"application/octet-stream"}\r\n\r\n`, v, '\r\n'))
+    c.push(`--${b}--`)
+    return new B(c,{type:"multipart/form-data; boundary="+b})}