tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: working DataVariable with .getProjectData method

pull/6018/head
danstarns 1 year ago
parent
7ce74dc778
commit
80f67e59d8
3 changed files with 320 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/dom_components/model/Component.ts
  2. 164
      test/specs/data_sources/__snapshots__/serialization.ts.snap
  3. 153
      test/specs/data_sources/serialization.ts

6
src/dom_components/model/Component.ts
View File

@ -882,15 +882,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
this.off(event, this.initTraits);
this.__loadTraits();
const attrs = { ...this.get('attributes') };
const traitDataVariableAttr: ObjectAny = {};
const traits = this.traits;
traits.each((trait) => {
if (!trait.changeProp) {
const name = trait.getName();
const value = trait.getInitValue();
if (trait.dataVariable) {
traitDataVariableAttr[name] = trait.dataVariable;
}
if (name && value) attrs[name] = value;
}
});
traits.length && this.set('attributes', attrs);
// store the trait data-variable attributes outside the attributes object so you can load a project with data-variable attributes
Object.keys(traitDataVariableAttr).length && this.set('attributes-data-variable', traitDataVariableAttr);
this.on(event, this.initTraits);
changed && em && em.trigger('component:toggled');
return this;

164
test/specs/data_sources/__snapshots__/serialization.ts.snap
View File

@ -0,0 +1,164 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DataSource Serialization .getProjectData ComponentDataVariable 1`] = `
{
"assets": [],
"pages": [
{
"frames": [
{
"component": {
"components": [
{
"components": [
{
"path": "component-serialization.id1.content",
"type": "data-variable",
"value": "default",
},
],
"tagName": "h1",
"type": "text",
},
],
"docEl": {
"tagName": "html",
},
"head": {
"type": "head",
},
"stylable": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-size",
],
"type": "wrapper",
},
"id": "data-variable-id",
},
],
"id": "data-variable-id",
"type": "main",
},
],
"styles": [],
"symbols": [],
}
`;
exports[`DataSource Serialization .getProjectData StyleDataVariable 1`] = `
{
"assets": [],
"pages": [
{
"frames": [
{
"component": {
"components": [
{
"attributes": {
"id": "data-variable-id",
},
"content": "Hello World",
"tagName": "h1",
"type": "text",
},
],
"docEl": {
"tagName": "html",
},
"head": {
"type": "head",
},
"stylable": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-size",
],
"type": "wrapper",
},
"id": "data-variable-id",
},
],
"id": "data-variable-id",
"type": "main",
},
],
"styles": [
{
"selectors": [
"data-variable-id",
],
"style": {
"color": {
"path": "colors-data.id1.color",
"type": "data-variable",
"value": "black",
},
},
},
],
"symbols": [],
}
`;
exports[`DataSource Serialization .getProjectData TraitDataVariable 1`] = `
{
"assets": [],
"pages": [
{
"frames": [
{
"component": {
"components": [
{
"attributes": {
"value": "test-value",
},
"attributes-data-variable": {
"value": {
"path": "test-input.id1.value",
"type": "data-variable",
"value": "default",
},
},
"tagName": "input",
"void": true,
},
],
"docEl": {
"tagName": "html",
},
"head": {
"type": "head",
},
"stylable": [
"background",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-size",
],
"type": "wrapper",
},
"id": "data-variable-id",
},
],
"id": "data-variable-id",
"type": "main",
},
],
"styles": [],
"symbols": [],
}
`;

153
test/specs/data_sources/serialization.ts
View File

@ -1,11 +1,45 @@
import Editor from '../../../src/editor/model/Editor';
import Editor from '../../../src/editor';
import DataSourceManager from '../../../src/data_sources';
import { DataSourceProps } from '../../../src/data_sources/types';
import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
import { DataVariableType } from '../../../src/data_sources/model/DataVariable';
import EditorModel from '../../../src/editor/model/Editor';
// Filter out the unique ids and selectors replaced with 'data-variable-id'
// Makes the snapshot more stable
function filterObjectForSnapshot(obj: any, parentKey: string = ''): any {
const result: any = {};
for (const key in obj) {
if (key === 'id') {
result[key] = 'data-variable-id';
continue;
}
if (key === 'selectors') {
result[key] = obj[key].map(() => 'data-variable-id');
continue;
}
if (typeof obj[key] === 'object' && obj[key] !== null) {
if (Array.isArray(obj[key])) {
result[key] = obj[key].map((item: any) =>
typeof item === 'object' ? filterObjectForSnapshot(item, key) : item,
);
} else {
result[key] = filterObjectForSnapshot(obj[key], key);
}
} else {
result[key] = obj[key];
}
}
return result;
}
describe('DataSource Serialization', () => {
let em: Editor;
let editor: Editor;
let em: EditorModel;
let dsm: DataSourceManager;
let fixtures: HTMLElement;
let cmpRoot: ComponentWrapper;
@ -18,10 +52,11 @@ describe('DataSource Serialization', () => {
};
beforeEach(() => {
em = new Editor({
editor = new Editor({
mediaCondition: 'max-width',
avoidInlineStyle: true,
});
em = editor.getModel();
dsm = em.DataSources;
document.body.innerHTML = '<div id="fixtures"></div>';
const { Pages, Components } = em;
@ -61,4 +96,116 @@ describe('DataSource Serialization', () => {
const html = em.getHtml();
expect(html).toMatchInlineSnapshot('"<body><h1><div>Hello World</div></h1></body>"');
});
// DataSources TODO
test.todo('component .getCss');
// DataSources TODO
test.todo('component .getJs');
describe('.getProjectData', () => {
test('ComponentDataVariable', () => {
const dataVariable = {
type: DataVariableType,
value: 'default',
path: `${datasource.id}.id1.content`,
};
cmpRoot.append({
tagName: 'h1',
type: 'text',
components: [dataVariable],
})[0];
const projectData = editor.getProjectData();
const page = projectData.pages[0];
const frame = page.frames[0];
const component = frame.component.components[0];
expect(component.components[0]).toEqual(dataVariable);
const snapshot = filterObjectForSnapshot(projectData);
expect(snapshot).toMatchSnapshot(``);
});
test('StyleDataVariable', () => {
const styleDataSource: DataSourceProps = {
id: 'colors-data',
records: [{ id: 'id1', color: 'red' }],
};
dsm.add(styleDataSource);
const dataVariable = {
type: DataVariableType,
value: 'black',
path: 'colors-data.id1.color',
};
cmpRoot.append({
tagName: 'h1',
type: 'text',
content: 'Hello World',
style: {
color: dataVariable,
},
})[0];
const projectData = editor.getProjectData();
const page = projectData.pages[0];
const frame = page.frames[0];
const component = frame.component.components[0];
const componentId = component.attributes.id;
expect(componentId).toBeDefined();
const styleSelector = projectData.styles.find((style: any) => style.selectors[0] === `#${componentId}`);
expect(styleSelector.style).toEqual({
color: dataVariable,
});
const snapshot = filterObjectForSnapshot(projectData);
expect(snapshot).toMatchSnapshot(``);
});
test('TraitDataVariable', () => {
const record = { id: 'id1', value: 'test-value' };
const inputDataSource: DataSourceProps = {
id: 'test-input',
records: [record],
};
dsm.add(inputDataSource);
const dataVariable = {
type: DataVariableType,
value: 'default',
path: `${inputDataSource.id}.id1.value`,
};
cmpRoot.append({
tagName: 'input',
traits: [
'name',
{
type: 'text',
label: 'Value',
name: 'value',
value: dataVariable,
},
],
})[0];
const projectData = editor.getProjectData();
const page = projectData.pages[0];
const frame = page.frames[0];
const component = frame.component.components[0];
expect(component).toHaveProperty('attributes-data-variable');
expect(component['attributes-data-variable']).toEqual({
value: dataVariable,
});
expect(component.attributes).toEqual({
value: record.value,
});
const snapshot = filterObjectForSnapshot(projectData);
expect(snapshot).toMatchSnapshot(``);
});
});
});

Write Preview
Loading…
Cancel
Save