diff --git a/src/json.js b/src/json.js
index cc7b2ebdf3ea8bf38143f2b46943082206a1e6d7..73ca01a3ba409c64c9231f26c84d5794eaee734c 100644
--- a/src/json.js
+++ b/src/json.js
@@ -19,9 +19,9 @@
 
 const path = require('path')
 
-const cardJsonPlugin = require('./cardJson-plugin')
 const transCardArray = require('./templater/bind').transCardArray
 const ResourceReferenceParsing = require('./resource-reference-script')
+
 import { logWarn } from './util'
 
 const REG_EVENT_STRING = /("\s*\$event\..+")|('\s*\$event\..+')/g
@@ -31,17 +31,16 @@ const REG_THIS = /this\..*/g
 module.exports = function (source) {
   this.cacheable && this.cacheable()
 
-  if (process.env.DEVICE_LEVEL === 'card') {
+  const extName = path.extname(this.resourcePath)
+  if (process.env.DEVICE_LEVEL === 'card' && (extName === '.json' || extName === '.js')) {
     try {
-      source = parseCard(this, source)
-    }
-    catch (e) {
+      return parseCard(this, source)
+    } catch (e) {
       logWarn(this, [{
-        reason: 'ERROR: Failed to parse the file : ' + this.resourcePath + `\n${e}`
+       reason: 'ERROR: Failed to parse the file : ' + this.resourcePath + `\n${e}`
       }])
       return '{}'
     }
-    return '{}'
   }
   return `module.exports = ${source}`
 }
@@ -52,149 +51,23 @@ function parseCard(_this, source) {
   if (source.trim().indexOf('export default') === 0) {
     source = source.replace('export default', '')
   }
-  const extName = path.extname(_this.resourcePath)
-  if (extName === '.json' || extName === '.js') {
-    source = ResourceReferenceParsing(source)
-    source = source.replace(REG_EVENT_STRING, item => {
-      return item.slice(1, -1)
-    })
-    source = source.replace(REG_EVENT, item => {
-      return '"' + item + '"'
-    })
-    source = source.replace(REG_THIS, item => {
-      if (item.charAt(item.length - 1) !== '\"' && item.charAt(item.length - 1) !== '\'' &&
-        item.slice(-2) !== '\"\,' && item.slice(-2) !== '\'\,') {
-          if (item.charAt(item.length - 1) === ',') {
-            item = `"{{${transCardArray(item.slice(0, -1))}}}",`.replace(/this\./g, '')
-          } else {
-            item = `"{{${transCardArray(item)}}}"`.replace(/this\./g, '')
-          }
-        }
-      return item
-    })
-  }
-  source = JSON.stringify(eval('(' + source + ')'))
-  const jsonPaths = mkJsonFiles(_this)
-  cardJsonPlugin.compileJson(_this._compiler, 'init', jsonPaths.indexJson)
-  if (jsonPaths.element) {
-    if (extName === '.json' || extName === '.js') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        processActions(JSON.parse(source).actions, _this), jsonPaths.element, 'actions')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        validateData(JSON.parse(source).data, _this), jsonPaths.element, 'data')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        validateData(JSON.parse(source).apiVersion, _this), jsonPaths.element, 'apiVersion')
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson,
-        replacePropsArray(JSON.parse(source).props, _this), jsonPaths.element, 'props')
-    } else if (extName === '.css' || extName === '.less' || extName === '.sass' || extName === '.scss') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson, JSON.parse(source),
-        jsonPaths.element, 'styles')
-    } else if (extName === '.hml') {
-      cardJsonPlugin.compileJson(_this._compiler, jsonPaths.element, jsonPaths.indexJson, JSON.parse(source),
-        jsonPaths.element, 'template')
-    }
-  } else {
-    if (extName === '.json' || extName === '.js') {
-      cardJsonPlugin.compileJson(_this._compiler, 'actions', jsonPaths.indexJson,
-        processActions(JSON.parse(source).actions, _this), 'actions')
-      cardJsonPlugin.compileJson(_this._compiler, 'data', jsonPaths.indexJson,
-        validateData(JSON.parse(source).data, _this), 'data')
-      cardJsonPlugin.compileJson(_this._compiler, 'apiVersion', jsonPaths.indexJson,
-        validateData(JSON.parse(source).apiVersion, _this), 'apiVersion')
-    } else if (extName === '.css' || extName === '.less' || extName === '.sass' || extName === '.scss') {
-      cardJsonPlugin.compileJson(_this._compiler, 'styles', jsonPaths.indexJson, JSON.parse(source), 'styles')
-    } else if (extName === '.hml') {
-      cardJsonPlugin.compileJson(_this._compiler, 'template', jsonPaths.indexJson, JSON.parse(source), 'template')
-    }
-  }
-  return source
-}
-
-function mkJsonFiles(_this) {
-  let indexJson = ''
-  let element
-  const resourceQuery = _this.resourceQuery.split('#');
-  const entrys = _this._compiler.options.entry
-  const resourcePath = _this.resourcePath
-  Object.keys(entrys).forEach(function (key) {
-    if (path.dirname(path.resolve(entrys[key]['import'][0])) === path.dirname(resourcePath)) {
-      indexJson = key + '.json'
-    } else {
-      indexJson = key + '.json'
-      element = resourceQuery[0].slice(1)
-    }
+  source = ResourceReferenceParsing(source)
+  source = source.replace(REG_EVENT_STRING, item => {
+    return item.slice(1, -1)
   })
-  indexJson = path.resolve(_this._compiler.options.output.path, indexJson)
-  return { indexJson: indexJson, element: element }
-}
-
-function replacePropsArray(propsValue, _this) {
-  if (!propsValue) {
-    return propsValue
-  }
-  if (Array.isArray(propsValue)) {
-    const propsObject = {}
-    propsValue.forEach(item => {
-      if (typeof(item) !== 'string') {
-        logWarn(_this, [{
-          reason: `WARNING: The props value type should be 'string', not '${typeof(item)}' in props array in custom elements.`
-        }])
-      }
-      propsObject[item] = { 'default': '' }
-    })
-    propsValue = propsObject
-  } else if (Object.prototype.toString.call(propsValue) === '[object Object]') {
-    Object.keys(propsValue).forEach(item => {
-      if (Object.prototype.toString.call(propsValue[item]) !== '[object Object]') {
-        logWarn(_this, [{
-          reason: 'WARNING: The props default value type can only be Object in custom elements.'
-        }])
-      }
-      if (!propsValue[item].hasOwnProperty('default')) {
-        propsValue[item] = { 'default': '' }
-      }
-    })
-  } else {
-    logWarn(_this, [{
-      reason: 'WARNING: The props type can only be Array or Object in custom elements.'
-    }])
-  }
-  return propsValue
-}
-
-function processActions(actionsValue, _this) {
-  if (Object.prototype.toString.call(actionsValue) === '[object Object]') {
-    Object.keys(actionsValue).forEach(item => {
-      if (actionsValue[item].method) {
-        if (typeof(actionsValue[item].method) === 'string') {
-          if (actionsValue[item].method.toLowerCase() !== actionsValue[item].method) {
-            logWarn(_this, [{
-              reason: `WARNING: The key method '${actionsValue[item].method}' in the actions don't support uppercase letters.`
-            }])
-            actionsValue[item].method = actionsValue[item].method.toLowerCase()
-          }
+  source = source.replace(REG_EVENT, item => {
+    return '"' + item + '"'
+  })
+  source = source.replace(REG_THIS, item => {
+    if (item.charAt(item.length - 1) !== '\"' && item.charAt(item.length - 1) !== '\'' &&
+      item.slice(-2) !== '\"\,' && item.slice(-2) !== '\'\,') {
+        if (item.charAt(item.length - 1) === ',') {
+          item = `"{{${transCardArray(item.slice(0, -1))}}}",`.replace(/this\./g, '')
         } else {
-          logWarn(_this, [{
-            reason: `WARNING: The key method type in the actions should be 'string', not '${typeof(actionsValue[item].method)}'.`
-          }])
+          item = `"{{${transCardArray(item)}}}"`.replace(/this\./g, '')
         }
       }
-    })
-  } else {
-    if (actionsValue) {
-      logWarn(_this, [{
-        reason: 'WARNING: The actions value type can only be Object.'
-      }])
-    }
-  }
-  return actionsValue
-}
-
-function validateData(dataValue, _this) {
-  if (dataValue && Object.prototype.toString.call(dataValue) !== '[object Object]') {
-    logWarn(_this, [{
-      reason: 'WARNING: The data value type can only be Object.'
-    }])
-  }
-  return dataValue
+    return item
+  })
+  return source
 }
diff --git a/src/util.js b/src/util.js
index dfc6f7922829b2b2b9dbcdfcfb8e77ebd616e043..b636b13f6967a63b46409c69f7e2b8053958bc8c 100644
--- a/src/util.js
+++ b/src/util.js
@@ -287,8 +287,9 @@ function requireModule(moduleName) {
   return source
 }
 
-export function jsonLoaders (type, customLoader) {
+export function jsonLoaders (type, customLoader, isVisual, queryType) {
   let loaders = []
+
   switch (type) {
     case "template":
       loaders = [{
@@ -318,5 +319,15 @@ export function jsonLoaders (type, customLoader) {
       name: path.resolve(__dirname, `../node_modules/${customLoader}`)
     })
   }
+
+  if (isVisual) {
+    loaders.push({
+      name: path.resolve(__dirname, 'extgen.js'),
+      query: {
+        type: queryType
+      }
+    })
+  }
+  
   return stringifyLoaders(loaders)
 }