@jsonms/js

@jsonms/js is an NPM package that allows you to synchronize your project data with a JSON.ms instance. JSON.ms is an online admin panel generator that helps manage structured JSON data with ease.

Installation

You can install @jsonms/js via npm:

npm install @jsonms/js

or using yarn:

yarn add @jsonms/js

Usage

To integrate @jsonms/js into your project, simply import and bind it to the editor (the editor is the online service).

Typescript

import { useJsonMs } from '@jsonms/js';

// This file is automatically generated by JSON.ms when synchronizing your project to a local directory.
import { type JmsSectionKey, type JmsLocaleKey, type JmsData } from '@/jms/typings';

useJsonMs().bindToEditor<JmsData, JmsSectionKey, JmsLocaleKey>({
  // ...
});

Javascript

import { useJsonMs } from '@jsonms/js';

// In Javascript
useJsonMs().bindToEditor({
  // ...
});

Why bindToEditor()? Because your project is loaded from an iFrame within JSON.ms and this library instantiate a communication protocol with its parent caller.

bindToEditor Options

The bindToEditor function supports optional parameters for customization:

interface JmsOptions {
  
  // Security
  targetOrigin?: string, // Target origin of the iframe (default: *)
  
  // Callbacks
  onSectionInit?: (name: string, paths: string[]) => void, // Callback when section is initialized for the first time 
  onLocaleInit?: (locale: string) => void, // Callback when locale is initialized for the first time
  onSettingsInit?: (settings: JmsSettings) => void, // Callback when settings are initialized for the first time
  onStructureInit?: (structure: JmsStructure) => void, // Callback when structure is initialized for the first time
  onDataChange?: (data: any) => void, // Callback when data changes
  onSectionChange?: (section: string) => void, // Callback when section changes
  onLocaleChange?: (locale: string) => void, // Callback when locale changes
  onSettingsChange?: (settings: JmsSettings) => void, // Callback when settings are changed
  onStructureChange?: (structure: JmsStructure) => void, // Callback when structure is changed
}

interface JmsSection<N> {
  name: N,
  paths: string[],
}

export interface JmsSettings {
  postMaxSize: `${number}${SizeUnit}`
  publicUrl: string,
  supportedFeatures: string[],
  uploadMaxSize: `${number}${SizeUnit}`
  version: `${number}.${number}.${number}`
}

export interface JmsStructure {
  global: {
    title: string,
    icon?: string,
    preview?: string,
  },
  locales: { [key: string]: string },
  enums: TEnum,
  schemas: TSchema,
  sections: { [key: string]: IField },
}

Now your project is ready to communicate with JSON.ms! You can use the callback functions to update your data as it is modified live by the user from the data editor.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License. See the LICENSE file for details.