WIP

.gitignore

@@ -4,4 +4,4 @@ graphql/schema.graphql.valid
 
 node_modules/
 formwidgets/graphqlschemaeditor/assets/
-!formwidgets/graphqlschemaeditor/assets/.gitkeep
+!formwidgets/graphqlschemaeditor/assets/.gitkeep

composer.json

@@ -1,5 +1,6 @@
 {
     "name": "thefehr/lighthouse",
+    "license": "MIT",
     "type": "october-plugin",
     "description": "",
     "require": {

formwidgets/GraphQLSchemaEditor.php

@@ -38,8 +38,8 @@ public function prepareVars()
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue();
         $this->vars['model'] = $this->model;
-        $this->vars['webpackAssetsUrl'] = asset('plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/');
-        $this->vars['webpackUrl'] = asset('plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/graphqlschemaeditor.js');
+        $this->vars['webpackAssetsUrl'] = asset('/plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/');
+        $this->vars['webpackUrl'] = asset('/plugins/thefehr/lighthouse/formwidgets/graphqlschemaeditor/assets/graphqlschemaeditor.js');
     }
 
     /**

formwidgets/graphqlschemaeditor/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "babel-cli": "^6.26.0",
     "babel-preset-react-app": "^3.1.2",
-    "graphql-editor": "^3.3.3",
+    "graphql-editor": "^3.3.4",
     "monaco-editor": "^0.20.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
@@ -15,25 +15,25 @@
     "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@types/react": "^16.9.19",
+    "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.4.2",
-    "file-loader": "^5.0.2",
+    "file-loader": "^5.1.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.1.3",
     "ts-loader": "^6.2.1",
     "ttf-loader": "^1.0.2",
-    "typescript": "^3.7.5",
+    "typescript": "^3.8.2",
     "webpack": "^4.41.6",
     "webpack-cli": "^3.3.11",
     "worker-loader": "^2.0.0"
   },
   "scripts": {
-    "start": "webpack --watch --mode development",
+    "start": "webpack --mode development",
     "build": "webpack"
   },
   "author": "",

formwidgets/graphqlschemaeditor/partials/_graphqlschemaeditor.htm

@@ -1,8 +1,33 @@
-<h2>My graphql schema editor</h2>
 <div id="graphqleditor" style="height: 70vh"></div>
-<input type="text" id="<?= $this->getId('input') ?>" hidden="hidden" value="<?= $value ?>">
+<textarea style="height: 100%; width: 100%; display: block"
+          name="<?= $name ?>"
+          id="<?= $this->getId('input') ?>"><?= $value ?></textarea>
 <script>
     var graphqlEditorValueId = "<?= $this->getId('input') ?>";
     var myRuntimePublicPath = "<?= $webpackAssetsUrl ?>"
+    var lighthouseLibrary = `
+        directive @all(
+          """
+          Specify the class name of the model to use.
+          This is only needed when the default model detection does not work.
+          """
+          model: String
+
+          """
+          Apply scopes to the underlying query.
+          """
+          scopes: [String!]
+        ) on FIELD_DEFINITION
+        `;
 </script>
-<script src="<?= $webpackUrl ?>"></script>
+<script src="<?= $webpackUrl ?>"></script>
+<style>
+    #graphqleditor > * {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+
+        box-sizing: border-box;
+    }
+</style>

formwidgets/graphqlschemaeditor/src/index.tsx

@@ -24,7 +24,7 @@ export const UIDiagramFull = style({
 });
 
 // @ts-ignore
-const schemaInput = document.getElementById(graphqlEditorValueId) as HTMLInputElement;
+const schemaInput = document.getElementById(graphqlEditorValueId) as HTMLTextAreaElement;
 // @ts-ignore
 __webpack_public_path__ = myRuntimePublicPath;
 
@@ -35,9 +35,7 @@ export const App = () => {
     });
     return (
         <div className={UiDiagram}>
-            <Editor schema={mySchema} graphController={controller => {
-                console.log(controller);
-            }}/>
+            <Editor schema={mySchema} />
         </div>
     );
 };

routes.php

@@ -1,22 +1,4 @@
 <?php
-
-///** @var \Illuminate\Contracts\Routing\Registrar $router */
-//$router = app('router');
-//
-//$router->group(config('thefehr.lighthouse::route', []), function () use ($router): void {
-//    $routeName = config('thefehr.lighthouse::route_name', 'graphql');
-//    $controller = config('thefehr.lighthouse::controller');
-//
-//    $methods = config('thefehr.lighthouse::route_enable_get', false)
-//    ? ['GET', 'POST']
-//    : ['POST'];
-//
-//    $router->match($methods, $routeName, [
-//        'as' => 'lighthouse.graphql',
-//        'uses' => $controller,
-//    ]);
-//});
-
 Route::group(config('thefehr.lighthouse::route', []), function () : void {
     $routeName = config('thefehr.lighthouse::route_name', 'graphql');
     $controller = config('thefehr.lighthouse::controller');
@@ -31,15 +13,6 @@
     ]);
 });
 
-
  Route::get('graphql/schema.graphql', function(){
-
-     $schemesBody = '';
-     $schemes = \TheFehr\Lighthouse\Models\Schema::published()->get();
-     foreach ($schemes as $schema) {
-         $schemesBody .= $schema->schema;
-     }
-
-     return $schemesBody;
-
+    return TheFehr\Lighthouse\Models\Settings::get('base_schema');
  });