vanjs-jsf 0.2.0 → 0.2.1

package/dist/VanJsfField.d.ts

@@ -14,8 +14,10 @@ export declare class VanJsfField extends VanJSComponent {
     handleChange: (field: VanJsfField, value: MultiType) => void;
     isVisibleState: State<boolean>;
     errorState: State<string>;
-    /** Used by file fields to pass the selected arrayPath key to formValues */
-    arrayPathValue: string;
+    /** Used by file fields to pass file metadata to formValues */
+    fileNameValue: string;
+    fileSizeValue: string;
+    fileTypeValue: string;
     constructor(field: Record<string, unknown>, initVal: MultiType, handleChange: (field: VanJsfField, value: MultiType) => void);
     get inputType(): string;
     get label(): string;

package/dist/VanJsfField.js

@@ -7,7 +7,7 @@ import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
 import * as eslint from "eslint-linter-browserify";
 import globals from "globals";
-const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, button, table, tr, th, td, strong, small } = van.tags;
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, button, strong, small } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
@@ -42,8 +42,10 @@ export class VanJsfField extends VanJSComponent {
     handleChange;
     isVisibleState;
     errorState;
-    /** Used by file fields to pass the selected arrayPath key to formValues */
-    arrayPathValue = "";
+    /** Used by file fields to pass file metadata to formValues */
+    fileNameValue = "";
+    fileSizeValue = "";
+    fileTypeValue = "";
     constructor(field, initVal, handleChange) {
         super();
         this.field = field;
@@ -248,17 +250,14 @@ export class VanJsfField extends VanJSComponent {
                 }), opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.file: {
-                const accept = this.field.accept || ".json,.csv,.xlsx";
-                const maxSizeMB = this.field.maxSizeMB || 50;
-                const previewRows = this.field.previewRows || 5;
+                const accept = this.field.accept || "";
+                const maxSizeMB = this.field.maxSizeMB;
+                const readAs = this.field.readAs || "text";
                 // Reactive states
                 const fileNameState = van.state("");
                 const fileSizeState = van.state("");
-                const parsingState = van.state(false);
-                const parsedDataState = van.state(null);
-                const arrayPathOptionsState = van.state([]);
-                const selectedArrayPathState = van.state("");
                 const dragOverState = van.state(false);
+                const readingState = van.state(false);
                 const formatSize = (bytes) => {
                     if (bytes < 1024)
                         return `${bytes} B`;
@@ -266,143 +265,56 @@ export class VanJsfField extends VanJSComponent {
                         return `${(bytes / 1024).toFixed(1)} KB`;
                     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
                 };
-                const formatNumber = (n) => n.toLocaleString();
-                const resolveArrayFromJson = (parsed) => {
-                    if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === "object") {
-                        return { data: parsed, paths: [] };
-                    }
-                    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
-                        const candidates = [];
-                        for (const [key, val] of Object.entries(parsed)) {
-                            if (Array.isArray(val) && val.length > 0 && typeof val[0] === "object") {
-                                candidates.push(key);
-                            }
-                        }
-                        if (candidates.length === 1) {
-                            return { data: parsed[candidates[0]], paths: [] };
-                        }
-                        if (candidates.length > 1) {
-                            return { data: null, paths: candidates };
-                        }
-                    }
-                    return { data: null, paths: [] };
-                };
-                const setData = (data, arrayPath) => {
-                    parsedDataState.val = data;
-                    this.arrayPathValue = arrayPath;
-                    selectedArrayPathState.val = arrayPath;
-                    parsingState.val = false;
-                    this.handleChange(this, JSON.stringify(data));
-                };
-                const setError = (msg) => {
-                    parsingState.val = false;
-                    parsedDataState.val = null;
-                    this.error = msg;
-                };
-                const processFile = async (file) => {
-                    // Reset state
+                const readFile = (file) => {
                     this.error = "";
-                    parsedDataState.val = null;
-                    arrayPathOptionsState.val = [];
-                    selectedArrayPathState.val = "";
-                    this.arrayPathValue = "";
                     // Validate size
-                    if (file.size > maxSizeMB * 1024 * 1024) {
-                        setError(`File exceeds maximum size of ${maxSizeMB} MB`);
+                    if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) {
+                        this.error = `File exceeds maximum size of ${maxSizeMB} MB`;
                         return;
                     }
                     fileNameState.val = file.name;
                     fileSizeState.val = formatSize(file.size);
-                    parsingState.val = true;
-                    const ext = file.name.split(".").pop()?.toLowerCase() || "";
-                    try {
-                        if (ext === "json") {
-                            const text = await file.text();
-                            let parsed;
-                            try {
-                                parsed = JSON.parse(text);
-                            }
-                            catch {
-                                setError("Invalid JSON file");
-                                return;
-                            }
-                            const { data, paths } = resolveArrayFromJson(parsed);
-                            if (data) {
-                                setData(data, "");
-                            }
-                            else if (paths.length > 1) {
-                                arrayPathOptionsState.val = paths;
-                                parsingState.val = false;
-                            }
-                            else {
-                                setError("JSON does not contain an array of objects");
-                            }
-                        }
-                        else if (ext === "csv") {
-                            try {
-                                const Papa = await import("papaparse");
-                                const text = await file.text();
-                                const result = Papa.default.parse(text, { header: true, skipEmptyLines: true });
-                                if (result.errors.length > 0) {
-                                    setError(`CSV parse error: ${result.errors[0].message}`);
-                                }
-                                else if (!result.data || result.data.length === 0) {
-                                    setError("CSV file is empty or has no data rows");
-                                }
-                                else {
-                                    setData(result.data, "");
-                                }
-                            }
-                            catch {
-                                setError("Install papaparse to support CSV files: npm install papaparse");
+                    readingState.val = true;
+                    // Store metadata
+                    this.fileNameValue = file.name;
+                    this.fileSizeValue = String(file.size);
+                    this.fileTypeValue = file.type;
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        readingState.val = false;
+                        let result = reader.result;
+                        if (readAs === "arrayBuffer" && reader.result instanceof ArrayBuffer) {
+                            // Base64-encode the ArrayBuffer
+                            const bytes = new Uint8Array(reader.result);
+                            let binary = "";
+                            for (let i = 0; i < bytes.byteLength; i++) {
+                                binary += String.fromCharCode(bytes[i]);
                             }
+                            result = btoa(binary);
                         }
-                        else if (ext === "xlsx" || ext === "xls") {
-                            try {
-                                const XLSX = await import("xlsx");
-                                const buffer = await file.arrayBuffer();
-                                const workbook = XLSX.read(buffer);
-                                const firstSheetName = workbook.SheetNames[0];
-                                if (!firstSheetName) {
-                                    setError("XLSX file has no sheets");
-                                    return;
-                                }
-                                const sheet = workbook.Sheets[firstSheetName];
-                                const data = XLSX.utils.sheet_to_json(sheet);
-                                if (data.length === 0) {
-                                    setError("XLSX sheet is empty");
-                                    return;
-                                }
-                                setData(data, "");
-                            }
-                            catch (e) {
-                                if (e instanceof Error && e.message.includes("Failed to fetch dynamically imported module")) {
-                                    setError("Install xlsx to support XLSX files: npm install xlsx");
-                                }
-                                else if (e instanceof Error) {
-                                    setError(`XLSX parse error: ${e.message}`);
-                                }
-                                else {
-                                    setError("Install xlsx to support XLSX files: npm install xlsx");
-                                }
-                            }
-                        }
-                        else {
-                            setError(`Unsupported file extension: .${ext}`);
-                        }
+                        this.handleChange(this, result);
+                    };
+                    reader.onerror = () => {
+                        readingState.val = false;
+                        this.error = "Error reading file";
+                    };
+                    if (readAs === "dataURL") {
+                        reader.readAsDataURL(file);
+                    }
+                    else if (readAs === "arrayBuffer") {
+                        reader.readAsArrayBuffer(file);
                     }
-                    catch (e) {
-                        setError(e instanceof Error ? e.message : "Error processing file");
+                    else {
+                        reader.readAsText(file);
                     }
                 };
                 const clearFile = () => {
                     fileNameState.val = "";
                     fileSizeState.val = "";
-                    parsedDataState.val = null;
-                    parsingState.val = false;
-                    arrayPathOptionsState.val = [];
-                    selectedArrayPathState.val = "";
-                    this.arrayPathValue = "";
+                    readingState.val = false;
+                    this.fileNameValue = "";
+                    this.fileSizeValue = "";
+                    this.fileTypeValue = "";
                     this.error = "";
                     this.handleChange(this, "");
                 };
@@ -413,7 +325,7 @@ export class VanJsfField extends VanJSComponent {
                     onchange: (e) => {
                         const files = e.target.files;
                         if (files && files[0])
-                            processFile(files[0]);
+                            readFile(files[0]);
                     },
                 });
                 const dropZone = div({
@@ -428,102 +340,12 @@ export class VanJsfField extends VanJSComponent {
                         dragOverState.val = false;
                         const files = e.dataTransfer?.files;
                         if (files && files[0])
-                            processFile(files[0]);
+                            readFile(files[0]);
                     },
                     onclick: () => fileInput.click(),
-                }, p({ style: "margin: 0; color: #666;" }, `Drop a file here or click to browse (${accept})`));
-                // We need to store the raw JSON for arrayPath selection
-                const rawJsonState = van.state(null);
-                // Override processFile's JSON branch to also store raw JSON
-                const originalProcessFile = processFile;
-                const processFileWrapped = async (file) => {
-                    const ext = file.name.split(".").pop()?.toLowerCase() || "";
-                    if (ext === "json") {
-                        this.error = "";
-                        parsedDataState.val = null;
-                        arrayPathOptionsState.val = [];
-                        selectedArrayPathState.val = "";
-                        this.arrayPathValue = "";
-                        if (file.size > maxSizeMB * 1024 * 1024) {
-                            setError(`File exceeds maximum size of ${maxSizeMB} MB`);
-                            return;
-                        }
-                        fileNameState.val = file.name;
-                        fileSizeState.val = formatSize(file.size);
-                        parsingState.val = true;
-                        try {
-                            const text = await file.text();
-                            let parsed;
-                            try {
-                                parsed = JSON.parse(text);
-                            }
-                            catch {
-                                setError("Invalid JSON file");
-                                return;
-                            }
-                            const { data, paths } = resolveArrayFromJson(parsed);
-                            if (data) {
-                                setData(data, "");
-                            }
-                            else if (paths.length > 1) {
-                                rawJsonState.val = parsed;
-                                arrayPathOptionsState.val = paths;
-                                parsingState.val = false;
-                            }
-                            else {
-                                setError("JSON does not contain an array of objects");
-                            }
-                        }
-                        catch (e) {
-                            setError(e instanceof Error ? e.message : "Error processing file");
-                        }
-                    }
-                    else {
-                        await originalProcessFile(file);
-                    }
-                };
-                // Re-bind event handlers to use wrapped version
-                fileInput.onchange = (e) => {
-                    const files = e.target.files;
-                    if (files && files[0])
-                        processFileWrapped(files[0]);
-                };
-                dropZone.ondrop = (e) => {
-                    e.preventDefault();
-                    dragOverState.val = false;
-                    const files = e.dataTransfer?.files;
-                    if (files && files[0])
-                        processFileWrapped(files[0]);
-                };
-                // Preview table
-                const previewTable = () => {
-                    return div(() => {
-                        const data = parsedDataState.val;
-                        if (!data || data.length === 0)
-                            return div();
-                        const columns = Object.keys(data[0]);
-                        const rows = data.slice(0, previewRows);
-                        return div({ style: "margin-top: 8px; overflow-x: auto;" }, div({ style: "margin-bottom: 4px; font-size: 0.9em; color: #666;" }, `Showing ${Math.min(previewRows, data.length)} of ${formatNumber(data.length)} rows`), table({ style: "border-collapse: collapse; width: 100%; font-size: 0.85em;" }, tr(...columns.map((col) => th({ style: "border: 1px solid #ddd; padding: 4px 8px; background: #f5f5f5; text-align: left; white-space: nowrap;" }, col))), ...rows.map((row) => tr(...columns.map((col) => td({ style: "border: 1px solid #ddd; padding: 4px 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" }, String(row[col] ?? "")))))));
-                    });
-                };
-                // arrayPath select handler — when user picks a path, extract data
-                const arrayPathSelectorEl = div(() => {
-                    const options = arrayPathOptionsState.val;
-                    if (options.length === 0)
-                        return div();
-                    return div({ style: "margin-top: 8px;" }, label({ style: "margin-right: 5px;" }, "Select data array:"), select({
-                        onchange: (e) => {
-                            const key = e.target.value;
-                            if (!key)
-                                return;
-                            const raw = rawJsonState.val;
-                            if (raw && Array.isArray(raw[key])) {
-                                setData(raw[key], key);
-                            }
-                        },
-                    }, option({ value: "" }, "-- choose --"), ...options.map((k) => option({ value: k }, k))));
-                });
-                // File info bar + clear button
+                }, p({ style: "margin: 0; color: #666;" }, accept
+                    ? `Drop a file here or click to browse (${accept})`
+                    : "Drop a file here or click to browse"));
                 const fileInfoBar = () => {
                     return div(() => {
                         const name = fileNameState.val;
@@ -535,22 +357,20 @@ export class VanJsfField extends VanJSComponent {
                             onclick: (e) => {
                                 e.stopPropagation();
                                 clearFile();
-                                // Reset the file input so the same file can be re-selected
                                 fileInput.value = "";
                             },
                         }, "Clear"));
                     });
                 };
-                // Parsing indicator
-                const parsingIndicator = () => {
+                const readingIndicator = () => {
                     return div(() => {
-                        if (!parsingState.val)
+                        if (!readingState.val)
                             return div();
-                        return div({ style: "margin-top: 8px; color: #666;" }, "Parsing file...");
+                        return div({ style: "margin-top: 8px; color: #666;" }, "Reading file...");
                     });
                 };
                 el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
-                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), fileInput, dropZone, fileInfoBar(), parsingIndicator(), arrayPathSelectorEl, previewTable(), p({ class: this.errorClass }, () => this.error));
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), fileInput, dropZone, fileInfoBar(), readingIndicator(), p({ class: this.errorClass }, () => this.error));
                 break;
             }
             default:

package/dist/VanJsfForm.js

@@ -60,9 +60,11 @@ class VanJsfForm {
     }
     handleFieldChange(field, value) {
         this.formValues[field.name] = value;
-        // For file fields, also store the selected arrayPath key
+        // For file fields, also store file metadata
         if (field.inputType === "file") {
-            this.formValues[field.name + "__arrayPath"] = field.arrayPathValue;
+            this.formValues[field.name + "__fileName"] = field.fileNameValue;
+            this.formValues[field.name + "__fileSize"] = field.fileSizeValue;
+            this.formValues[field.name + "__fileType"] = field.fileTypeValue;
         }
         this.config.formValues = this.formValues;
         const { formErrors } = this.headlessForm.handleValidation(this.formValues);